JSFiddle - React, Tailwind, and code Playground

by webjunkie01

HTML

<ul class="list">
<li class="category"><a class="category-header" href="#">Category1</a>
  <ul>
    <li>Subcategory1</li>
    <li>Subcategory2</li>
  </ul>
</li>
<li class="category"><a class="category-header" href="#">Category2</a>
  <ul>
    <li>Subcategory</li>
    <li>Subcategory1</li>
  </ul>
</li>

</ul>
<script>
    $(document).ready(function() {
  $('.list').accordion();
})
</script>

CSS

.closed {  height: 0;display:none;}
#active{display:block;}

JavaScript

(function($){
  $.fn.accordion = function() {
    var el = this;
    var catHeight;
    catHeight = new Array();

    el.find('.category ul').each(function(i){
      var category = $(this);
      catHeight[i] = category.height();
      category.addClass('closed')

    });

      el.find('.category-header ').bind('click', function(e) {
        e.preventDefault();
        var toExpand = $(this).next('ul');
        var i = toExpand.index('li ul');

        if (toExpand.attr('id') == 'active') {
          toExpand
          .removeAttr('id')
          .removeAttr('style')
          .addClass('closed');

        } else {
        var active = $('#active')

        if (active.length > 0) {
          active
          .removeAttr('id')
          .removeAttr('style')
          .addClass('closed');
        }

        toExpand
        .attr('id', 'active')
        .css('height', catHeight[i]+'px')
        .removeClass('closed');

      }
  });
}
})(jQuery);