Help making menu script better

by Akram kamal

HTML

<body>
<main>
	<nav>
		<section>
			<a href="#" id="group1" class="group">Group 1</a>
			<ul id="gr1">
				<li><a href="#" id="group1link1">Link 1</a></li>
				<li><a href="#" id="group1link2">Link 2</a></li>
				<li><a href="#" id="group1link3">Link 3</a></li>
			</ul>
		</section>
		<section>
			<a href="#" id="group2" class="group">Group 2</a>
			<ul id="gr2">
				<li><a href="#" id="group2link1">Link 1</a></li>
				<li><a href="#" id="group2link2">Link 2</a></li>
				<li><a href="#" id="group2link3">Link 3</a></li>
			</ul>
		</section>
		<section>
			<a href="#" id="group3" class="group">Group 3</a>
			<ul id="gr3">
				<li><a href="#" id="group3link1">Link 1</a></li>
				<li><a href="#" id="group3link2">Link 2</a></li>
				<li><a href="#" id="group3link3">Link 3</a></li>
			</ul>
		</section>
	</nav>
	
	<section id="content">
		<div id="gr1l1">
			<p>Group 1, Link 1</p>
		</div>
		<div id="gr1l2">
			<p>Group 1, Link 2</p>
		</div>
		<div id="gr1l3">
			<p>Group 1, Link 3</p>
		</div>
		<div id="gr2l1">
			<p>Group 2, Link 1</p>
		</div>
		<div id="gr2l2">
			<p>Group 2, Link 2</p>
		</div>
		<div id="gr2l3">
			<p>Group 2, Link 3</p>
		</div>
		<div id="gr3l1">
			<p>Group 3, Link 1</p>
		</div>
		<div id="gr3l2">
			<p>Group 3, Link 2</p>
		</div>
		<div id="gr3l3">
			<p>Group 3, Link 3</p>
		</div>
	</section>
</main>
</body>

CSS

div, ul{
		display:none;
	}
	html, body{
		margin:0;
		padding:0;
		background:grey;
		font-family:Arial, Helvetica, sans-serif;
		line-height:1;
	}
	main{
		width:640px;
		margin:100px auto;
	}
	nav{
		width:320px;
		height:480px;
		float:left;
		background:#fff;
		border:1px solid #C8C7CC;
		box-sizing:border-box;
	}
	nav section a{
		display:block;
		height:50px;
		line-height:50px;
		color:#000;
		font-size:13px;
		text-decoration:none;
		padding-left:5px;
		border-bottom:1px solid #C8C7CC;
	}
	nav section a:hover{
		background:#D9D9D9;
	}
	nav section ul{
		margin:0 0 0 40px;
		padding:0;
		list-style:none;
	}
	#content{
		width:320px;
		height:480px;
		margin:0 0 0 320px;
		background:#fff;
		border:1px solid #C8C7CC;
		box-sizing:border-box;
	}

JavaScript

$(document).ready(function(){
    $('.group').click(function() {
        $(this).next('ul').toggle();
        $(this).closest("section").siblings().find("ul").hide()
    });
});