[Javascript] Show/Hide Div

liljon28 · Aug 19, 2008

hey all...

I want to have a div with the content hide when you click on another link in the navigation (HERE)

(click home and about)

So the "Home" div would hide when the "About Us" div becomes visible.

It sorta works with this little code you see here but you've gotta click on the same link again for that div to hide... I'd like it to automatically hide when u click a different link.

Code:

function show(divID) {
  var item = document.getElementById(divID);
  if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
	
	
  }
}

I'd love some help with this
Thanks

fook3d · Aug 20, 2008

DynamicDrive is your friend

EliteGM · Aug 20, 2008

This is ezpz:

Code:

<html>
<body>

<script type="text/javascript">
<!--

function show(id) {
document.getElementById(id).style.display = 'block';
}

function hide(id) {
document.getElementById(id).style.display = 'none';
}

function handleMenu(id)
{
var obj = document.getElementById(id);

if (obj.style.display == 'none')
{
show(id);
} else {
hide(id);
}
}

-->
</script>

<a href="javascript: handleMenu('hidden');hide('hidden_2');">Stuff</a>
<div id="hidden" style="display:none;">
<a href="#">Link_1</a> |
<a href="#">Link_2</a> |
<a href="#">Link_3</a> |
</div>
<br /><br />
<a href="javascript: handleMenu('hidden_2');hide('hidden');">More Stuff</a>
<div id="hidden_2" style="display:none;">
<a href="#">Link_1</a> |
<a href="#">Link_2</a> |
<a href="#">Link_3</a> |
</div>

</body>
</html>

Something like that?
Just add to each menu link u make like 'handleMenu('this_to_open');hide('the_other_menu');hide('the_second_other_menu');'