JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
<div class="show_menu"><a>Show Menu</a>

</div>
<div class="hide_menu" style="display:none;"><a>Hide Menu</a>

</div>
<div id="nav" style="display:none;">
    <li><a href="/admin/index.php">Dashboard</a>

    </li>
    <li><a>Contacts</a>

        <ul>
            <li><strong>Companies</strong>

            </li>
            <li><a href="/admin/index.php?id=customer/addcustomer">Add Company</a>

            </li>
            <li><a href="/admin/index.php?id=customer/viewcustomer">View Company</a>

            </li>
            <li><strong>Contacts</strong>

            </li>
            <li><a href="/admin/index.php?id=contacts/addcontact">Add Contact</a>

            </li>
            <li><a href="/admin/index.php?id=contacts/viewcontact">View Contact</a>

            </li>
            <li><strong>Resellers</strong>

            </li>
            <li><a href="/admin/index.php?id=reseller/addreseller">Add Reseller</a>

            </li>
            <li><a href="/admin/index.php?id=reseller/viewreseller">View Reseller</a>

            </li>
            <li><strong>Salesman</strong>

            </li>
            <li><a href="/admin/index.php?id=salesman/addsalesman">Add Salesman</a>

            </li>
            <li><a href="/admin/index.php?id=salesman/viewsalesman">View Salesman</a>

            </li>
        </ul>
    </li>
    <li><a>Customer Info</a>

        <ul>
            <li><a href="/admin/index.php?id=customer/commsone-phonelines">Comms One Phone Lines</a>

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

JavaScript

// don't use document ready inside a fiddle

/* don't need this for the purposes of your question so I'm just taking it out for the fiddle
  $('#nav > li > a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#nav li ul').slideUp();
	   $(this).next().slideToggle();
	   $('#nav li a').removeClass('active');
	   $(this).addClass('active');
	 }
  });
  */

// setup the initial display on page load
var menu_state = $.cookie('mydomain_menuflag');

if (typeof menu_state !== "undefined" && menu_state == "visible") {
    $('#nav').show; // visible, and cookie is set
} else {
    $('#nav').hide; // hidden or cookie is not set, set just in case
    $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
}

console.log($.cookie('mydomain_menuflag'));

// listen for the clicks
$('.show_menu').click(function () {
    console.log('showing...');

    $('#nav').toggle();
    $.cookie('mydomain_menuflag', 'visible'); // update (or set) the cookie
    $("#page_cont").css("width", "80%");
    $(".hide_menu").css("display", "block");
    $(".show_menu").css("display", "none");

    console.log($.cookie('mydomain_menuflag'));
});
$('.hide_menu').click(function () {
    console.log('hiding...');

    $('#nav').toggle();
    $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
    $("#page_cont").css("width", "100%");
    $(".hide_menu").css("display", "none");
    $(".show_menu").css("display", "block");

    console.log($.cookie('mydomain_menuflag'));
});