JQuery UI Menu with multiple div

JQuery UI Menu with multiple div

Hello

I have a requirement to show the Menu on the left and the content on right. For the Menu im using the JQuery UI. On the click of any particular list item it should show the content for that specific list item.

How can this be done considering my .html as
<div class="nav">
<ul id="menu">
<li id="link1"><a href="#">List1</a></li>
<li id="link2"><a href="#">List2</a></li>
<li id="link3"><a href="#">List3</a></li>
</ul>
</div>
<div class="reportContent">
<div id="page1" class="content">
<div id="export1">
<h1>Page 1</h1>
<p>First section of content.</p>
</div>
</div>
<div id="page2" class="content">
<div id="export2">
<h1>Page 2</h1>
<p>Second section of content.</p>
</div>
</div>
<div id="page3" class="content">
<div id="export3">
<h1>Page 3</h1>
<p>Third section of content.</p>
</div>
</div>
</div>


.JS
$("#menu").menu();

$('#menu a').click(function() {
<cant understand this>
});
$('.reportContent div').hide();