<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="accordianmenu"> <ul class="nav" id="side-menu"> <li> <a href="index.php"><i class="fa fa-home nav_icon"></i>Dashboard</a> </li> <li> <p><i class="fa fa-table nav_icon"></i>Templates</p> <ul><hr/> <li><a href="#"><i class="fa fa-briefcase nav_icon"></i>Business</a></li> <li><a href="#"><i class="fa fa-briefcase nav_icon"></i>Automobile</a></li> <li><a href="#"><i class="fa fa-table nav_icon"></i>E-commarse</a></li> </ul> </li> <li class=""> <a href="toutiral.php"><i class="fa fa-book nav_icon"></i>How to Install ?</a> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </nav> </div> </div> <style type="text/css">* {margin: 0; padding: 0;} body { font-family: arial; } .fa-table{ margin-left: 3px; } #accordianmenu { background: #f6f; width: 250px; margin: 20px auto 0 20px; color: #fff; } #accordianmenu p { font-size: 16px; line-height: 24px; padding: 0 10px; cursor: pointer; margin:0; } #accordianmenu p:hover { text-shadow: 0 0 1px rgba(255, 255, 255, 0.7); } #accordianmenu li { list-style-type: none; } #accordianmenu ul ul li a { color: white; text-decoration: none; font-size: 15px; line-height: 27px; display: block; padding: 0 15px; } #accordianmenu ul ul li a:hover { background: black; color:white; } #accordianmenu ul ul { display: none; } #accordianmenu li.active ul { display: block; }</style> <script type="text/javascript"> $(document).ready(function(){ $("#accordianmenu p").click(function(){ $("#accordianmenu ul ul").slideUp(); if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }); }); </script>