JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="http://www.designchemical.com/lab/jquery/demo/js/jquery.cookie.js"></script>
<ul id="cssmenu">
	    <li><a href="#">Item 1</a>
		  <ul>
		    <li><a href="#">Sub-Item 1 a</a></li>
			<li><a href="#">Sub-Item 1 b</a></li>
			<li><a href="#">Sub-Item 1 c</a></li>
		  </ul>
		</li>
		<li><a href="#">Item 2</a>
		  <ul>
		    <li><a href="#">Sub-Item 2 a</a></li>
			<li><a href="#">Sub-Item 2 b</a></li>
		  </ul>
		</li>
		<li><a href="#">Item 3</a>
		  <ul>
		    <li><a href="#">Sub-Item 3 a</a></li>
			<li><a href="#">Sub-Item 3 b</a></li>
			<li><a href="#">Sub-Item 3 c</a></li>
			<li><a href="#">Sub-Item 3 d</a></li>
		  </ul>
		</li>
		<li><a href="#">Item 4</a>
		  <ul>
		    <li><a href="#">Sub-Item 4 a</a></li>
			<li><a href="#">Sub-Item 4 b</a></li>
			<li><a href="#">Sub-Item 4 c</a></li>
		  </ul>
		</li>
	  </ul>

CSS

ul{list-style: none; padding: 0; margin: 0;}
#cssmenu {float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; margin: 15px 0;}
#cssmenu li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#cssmenu li a:hover, #cssmenu li a.active {background: #999; color: #fff;}
#cssmenu li ul {display: none;}
#cssmenu li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}

JavaScript

$(document).ready(function () {
  var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
	$('#cssmenu > li > a:eq('+checkCookie+')').addClass('active').next().show();
  }
  $('#cssmenu > li > a').click(function(){
      var navIndex = $('#cssmenu > li > a').index(this);
	  $.cookie("nav-item", navIndex);
	  $('#cssmenu li ul').slideUp();
	   if ($(this).next().is(":visible")){
		   $(this).next().slideUp();
	   } else {
	   $(this).next().slideToggle();
	   }
	   $('#cssmenu li a').removeClass('active');
	   $(this).addClass('active');
  });
});