Simple Accordion Menu

by Lakshman Kambam

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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>

CSS

* {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;
	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;
}

JavaScript

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