JSFiddle - React, Tailwind, and code Playground

by Jobin Jose

HTML

<ul id="toggle">
        <li>
	       <div class="active">
		      <span class="menu-icons home"> </span>
		         <h3>HOME</h3>
	       </div>
	   </li>

	   
        <li>
	      <div>
	         <span class="menu-icons about"> </span>
	            <h3>ABOUT US</h3>
                   <span class="plus-btn"></span> 
	                  <div class="clear"> </div>
	      </div>
        
		    <ul>
                <li><a href="#">OUR TEAM</a></li>
                <li><a href="#">OUR SERVICES</a></li>
           </ul>
        </li>
	
	
        <li>
	     <div>
	        <span class="menu-icons portfolio"> </span>
	           <h3>PORTFOLIO</h3>
	              <span class="plus-btn"></span> 
	     </div>
		 
	        <ul>
                <li><a href="#">WEB DESIGN</a></li>
                <li><a href="#">GRAPHIC DESIGN</a></li>
            </ul>
	    </li>
	
	
        <li>
	      <div>
	        <span class="menu-icons contact"> </span>
	           <h3>CONTACT</h3>
	      </div>
	    </li>
	
   </ul>

CSS

body { 
width: 100%;
background: url('../img/bg.png');
}

#toggle { width: 240px; list-style: none; margin: 170px auto;}
#toggle div:hover{ background: #f3b784;}
#toggle div.active{ background: #f3b784; }
#toggle div { background-color: #f58220; cursor: pointer; display: block; margin: 1px; }

#toggle h3{ font-size: 14px;
	margin: 0;
	padding: 0;
	font-family: Tahoma;
	color: #fff;
	line-height: 41px;
	font-weight: normal;
	text-shadow: 1px 1px 0px #adadad;
    filter: dropshadow(color=#adadad, offx=1, offy=1);
}

.clear{ clear: both; display: block; overflow: hidden; visibility: hidden; }


/*= ICONS
--------------------------------------------------------*/

span.menu-icons  { 
	font-size: 26px;
	background: url('http://tophitechgadgets.com/wp-content/uploads/2013/12/menu-icons.png');
	height: 20px;
	width: 22px;
	float: left;
	margin: 10px 7px 10px 12px;
}

span.menu-icons.home{ background-position: 0 0; }
span.menu-icons.about{ background-position: -23px 0px; }
span.menu-icons.portfolio{ background-position: -45px 0px; }
span.menu-icons.contact{ background-position: -69px 0px; }

span.plus-btn{
	float: right;
	height: 41px;
	width: 43px;
	background: #f3b784 url('http://tophitechgadgets.com/wp-content/uploads/2013/12/plus-btn-img.png')no-repeat center;
	margin-top: -41px;
	padding:0;
}

span.minus-btn{
	float: right;
	height: 41px;
	width: 43px;
	background: #f3b784 url('http://tophitechgadgets.com/wp-content/uploads/2013/12/minus-btn-img.png')no-repeat center;
	margin-top: -41px;
	padding:0;
}



/*= UNORDERED LIST STYLES
--------------------------------------------------------*/

#toggle ul { list-style: none; display: none; background-color:#f3b784; color: fff; }
#toggle ul li { line-height: 41px; color: #fff; list-style: circle; width: 240px; padding: 0; margin: 0; }

#toggle a {
    text-decoration: none;
	color: #fff;
	font-family: Tahoma;
	font-size: 14px;
	text-shadow: 1px 1px 0px #adadad;
    filter: dropshadow(color=#adadad, offx=1,...

JavaScript

$("#toggle > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#toggle ul').slideUp();
         $("span.minus-btn").removeClass('minus-btn');
    }
    $(this).next().slideToggle();
});
 
 
$("#toggle > li > div").click(function() {
        $("#toggle > li > div").removeClass("active");
        $(this).addClass('active');
	   
if($(this).hasClass("active")){
       $(this).find("span.plus-btn").toggleClass('minus-btn');
         }
   
});