<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> <li class="active"> <p>mainlink1</p> <ul> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> </ul> </li> <li> <p>mainlink2</p> <ul> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> </ul> </li> <li> <p>mainlink3</p> <ul> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> </ul> </li> <li> <p>mainlink4</p> <ul> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> <li><a href="#">sublink1</a></li> </ul> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

* {margin: 0; padding: 0;} body { font-family: arial; } #accordianmenu { background: #6599e0; width: 250px; margin: 20px auto 0 20px; color: black; } #accordianmenu p { font-size: 12px; line-height: 34px; padding: 0 10px; cursor: pointer; margin:0; background: #c5c5c7; border-bottom:1px solid black; } #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: 11px; 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; }

$(document).ready(function(){ $("#accordianmenu p").click(function(){ $("#accordianmenu ul ul").slideUp(); if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }); });