JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<li class="sub_menu">
               		<span>Organizational Structure</span>
                    <aside class="drop">
                        <ul>
                            <li>
                                <a href="board_of_directors.html">Board of Directors</a>
                            </li>
                            <li>
                                <a href="sharia_board.html">Sharia Board</a>
                            </li>
                            <li>
                                <a href="executive_management.html">Executive Management</a>
                            </li>
                       </ul>
                   </aside>
                </li>

CSS

li.sub_menu {
	display: block;
	color:#01bcda;
	font-size:14px;
	margin-top:5px;
	margin-bottom:10px;
	cursor:pointer;
    width:300px;
	font-family:'open_sansregular', Arial, Helvetica, sans-serif;
	padding-right:20px;	
}
 li.sub_menu span{
	background:url(http://www.pocketgamer.biz/images/dropdown_arrow.png) no-repeat right 3px;
    width:300px;
    display:inline-block;
}
.up{
	background:url(http://www.guppygames.com/mail/skins/default/images/buttons/up_arrow.png) no-repeat right 3px !important;
}

JavaScript

//sub-menu//
$(".drop").hide();
$(".sub_menu").click(function(e){
	e.preventDefault();
	$(".drop", $(this).parent()).slideToggle();       
});	
$("li.sub_menu span").click( function(){        
   var cls=$(this).attr('class');
   if(cls=="up")
           $(this).removeClass("up"); 
   else
       $(this).addClass("up");     
});