Show and Hide menu (where only shows one at a time) - css

Question

Im having such a problem, I have a menu that has some hidden sub content. That when the user clicks the nav button some hidden content will appear. That part is fine and all working.
What I need to know is when I have one nav item showing it's hidden content. If the user clicks on the next nav item. I would like the other hidden content to disappear and the new hidden content to appear.
My inspiration comes from this website. http://www.o2.co.uk/ if you click on the nav arrow items. Any help on this would be great. By the way all the Show and Hide effects are all working.
Thanks Anyone who can help..

Answer 1

I'm assuming you're doing this in javascript. Pardon me if I'm being too elementary here.
Your function (if you can post it, that would be helpful) needs to not only change the display attribute of the element you clicked, but also change it to display:none; for any others.
So when you click on the nav item, your javascript changes the display attribute for that list to :block or whatever, and ALSO changes all the other lists to display:none. That's a little brute-force, so you could also just change whatever other ones are currently something other than :none to :none.

Answer 2

You'll need jQuery for this but...
first we tie a onClick function to each element with the class 'link'
we tell that onClick that on a click, HIDE all elements with the class 'hidable' and then show the div with the ID of the rel attribute value in THIS link.
http://api.fatherstorm.com/test/4159899.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
<script>
$(document).ready(function() {
$('.link').each(function(){
$(this).click(function(){
$('.hidable').hide();
$($(this).attr('rel')).show();
});
});
});
</script>
<ul>
<li class='link' rel='#div1'>l1</li>
<li class='link' rel='#div2'>l2</li>
<li class='link' rel='#div3'>l3</li>
<li class='link' rel='#div4'>l4</li>
<li class='link' rel='#div5'>l5</li>
</ul>
for the code block
<div class='hidable' id='div1'>div 1</div>
<div class='hidable' id='div2'>div 2</div>
<div class='hidable' id='div3'>div 3</div>
<div class='hidable' id='div4'>div 4</div>
<div class='hidable' id='div5'>div 5</div>