JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div id="dropdown-1">
  <div class="heading">
    <i class="fa fa-angle-double-up"></i>
    <i class="fa fa-angle-double-down"></i>
    <h5>Title 1</h5>
  </div>
  <div class="content">
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>



<div id="dropdown-2">
  <div class="heading">
    <i class="fa fa-angle-double-up"></i>
    <i class="fa fa-angle-double-down"></i>
    <h5>Title 2</h5>
  </div>
  <div class="content">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </div>

</div>

CSS

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

JavaScript

$(document).ready(function() {
    var openTabs = [];
    
    $(".content").hide();
    $(".fa-angle-double-up").hide();
    
    $(".heading").click(function(){
        var $this = $(this),
        selector = '#' + $this.parent().attr('id') + ' .heading';

        if ($(this).next('.content').is(':visible'))
        {
            var pos = openTabs.indexOf(selector);
            openTabs.splice(pos, 1);
        }
        else
        {
            openTabs.push(selector);
        }
        
        localStorage.openTabs = openTabs.join(',');
        
        $this.next(".content").slideToggle(500);
        $this.find(".fa-angle-double-up, .fa-angle-double-down").toggle();
    });

    if (localStorage.openTabs)
        $(localStorage.openTabs).click();
});