hiding list when another anchor is clicked
Hi there, thanks in advance to anyone kind enough to help me with this!
This is my FIRST attempt at using Jquery to make a site menu for a client, and I'm pretty new to Javascript as a whole..
I have a two column horizontal menu, and when an anchor on the left column is clicked it brings up a list in the right column..
how do I hide list in the left column when a different anchor is clicked, bringing the new list to the top of the column?
here is my code, Thanks again!!!
<style type="text/css">
ul.nobulletnoindent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#999;
}
a:link {color: #999;}
a:visited {color: #999;}
a:active {color: #999;}
a:hover {background-color: #999;}
a {text-decoration: none;}
.menucolumn{
width:150px;
height:400px;
float:left;
}
<script src="scripts/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('ul#aboutuslist').hide();
$('a#aboutus').click(function()
{
$('ul#aboutuslist').show('slow');
})
$('ul#clientlist').hide();
$('a#clients').click(function()
{
$('ul#clientlist').show('slow');
})
$('ul#principalslist').hide();
$('a#profiles').click(function()
{
$('ul#principalslist').show('slow');
})
})
</script>
</head>
<body>
<div class="menucolumn">
<ul class="nobulletnoindent">
<li><a href="#" id="aboutus">About us</a></li>
<li><a href='#' id="clients">Clients</a></li>
<li><a href='#' id="profiles">Profiles of Principals</a></li>
<li><a href='#' id="contact">Contact us</a></li>
</ul>
</div><!--column1-->
<div class="menucolumn">
<ul class="nobulletnoindent" id="aboutuslist">
<li>Representation</li>
<li>Expert Witness Work</li>
<li>Education</li>
<li>Awards</li>
<li>White Mark in the Community</li>
</ul>
<ul class="nobulletnoindent" id="clientlist">
<li>Music Recording</li>
<li>Broadcast</li>
<li>Film and TV Post</li>
<li>Private</li>
<li>All by date</li>
</ul>
<ul class="nobulletnoindent" id="principalslist">
<li>David Bell</li>
<li>Derek Buckingham</li>
<li>Alan Cundell</li>
</ul>
</div><!--column2-->