JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<dl class="narrow-by">    
  <dt class="toggle-tab-minus"></dt>
  <dt class="toggle-content">something</dt>
</dl>

CSS

.toggle-tab-plus:before {
    content: "+";
}
.toggle-tab-minus:before {
    content: "-";
}
.visible {
  display: none;
}

JavaScript

$('.toggle-tab-plus').click(function(){
    $(this).toggleClass('toggle-tab-plus toggle-tab-minus');
    $(this).parent().toggleClass('toggle-visible').find('.toggle-content').toggleClass('visible');
  });
  $('.toggle-tab-minus').click(function () {
    $(this).toggleClass('toggle-tab-minus toggle-tab-plus');
    $(this).parent().toggleClass('toggle-visible').find('.toggle-content').toggleClass('visible');
  });