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 class="content">
    		<ul>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
    	</div>
    	<div class="content">
    		<ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</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();
});