JSFiddle - React, Tailwind, and code Playground

by Dracs

HTML

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<ul class="nav">
    <li><a href="index.html">Home</a>

    </li>
    <li><a class="profile" href="#">Profile</a>

        <ul id="profile">
            <li><a href="company.html">Company</a>

            </li>
            <li><a href="structure.html">Structure</a>

            </li>
            <li><a href="team.html">Team</a>

            </li>
        </ul>
    </li>
    <li><a class="projects" href="#">Projects</a>

        <ul id="projects">
            <li><a href="chapter.html">Chapter</a>

            </li>
            <li><a href="pblc-trde.html">Pblc Trde</a>

            </li>
            <li><a href="globe.html">Globe</a>

            </li>
            <li><a href="komforte.html">Komforte</a>

            </li>
        </ul>
    </li>

JavaScript

if ($.cookie('show_menu') !== undefined) {
    $('#' + $.cookie('show_menu')).click();
}

$('.nav > li > ul').each(function () {
    //Hide the sub lists
    $(this).hide();
    //Get link with same ID as Class
    var id = $(this).attr('id');
    //When link is clicked
    $('.' + id).click(function () {
        //Get the sub list
        var list = $('#' + $(this).attr('class'));
        //Check if it's currently visible
        if (list.is(':visible')) {
            list.hide(); //Hide list     
            $.cookie('show_menu', ''); //Unset open menu
        } else {
            list.show(); //Show list
            $.cookie('show_menu', list.attr('class')); //Set open menu
        }
    });
});