Trying to show and hide div's when the user clicks on a navigation button.
Where I'm stuck is when I try and show/hide a div that has div's nested in side.
Here's a test I'm working on:
So as a test when I click a link it should hide any visible divs within #content and then show the div the user has requested. This seems to work fine for "home" but "web" with its nested div wont display again.
Any help would be great.
Where I'm stuck is when I try and show/hide a div that has div's nested in side.
Here's a test I'm working on:
Code:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script>
function ShowHide(d) {
jQuery('#content div:visible').animate({"height": "hide"}, { duration: 500 });
jQuery(d).animate({"height": "show"}, { duration: 500 });
}
</script>
</head>
<body>
<div id="header">
<a onclick="ShowHide(home); return false;" href="#">Home</a>
<a onclick="ShowHide(web); return false;" href="#">Websites</a>
</div>
<div id="content">
<div id="home">Home</div>
<div id="web">
<div class="details">Web</div>
</div>
</div>
</body>
</html>So as a test when I click a link it should hide any visible divs within #content and then show the div the user has requested. This seems to work fine for "home" but "web" with its nested div wont display again.
Any help would be great.