jQuery Showing/Hiding div problem

Hencore

Hencore

Hencore

Associate
Joined
15 Oct 2003
Posts
2,478
Location
Newcastle
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:

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.
 
You should try and use unobtrusive JavaScript; this basically means don't put JavaScript directly into the 'a' tags but set-up the same action with JavaScript itself. I.e. I've used:

PHP: 
$('#header a').click(function() { }

To automatically create an event so that when someone clicks on an 'a' link within the header div that block of code runs. The HTML for these links contain no JavaScript references at all using this method.


Something like this should work:
PHP: 
<html>
<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>


<script>
$(document).ready(function() {
	$('#header a').click(function() {
		// Look up the href value of the clicked link which points to the corresponding target div
		var target = $($(this).attr('href'));
		// Hide everything with a class of hideable (i.e. the div which is currently open)
		$("#content .hideable").hide('slow');
		// Show/hide the new div
		target.is(':hidden') ? target.show('slow') : target.hide('slow');
	});
});
</script>


</head>
<body>
		<div id="header"> 
			<a id="header_home" href="#home">Home</a>
			<a id="header_web" href="#web">Websites</a>
		</div>
		
		<div id="content">
 
			<div id="home" class="hideable">Home</div>
			
			<div id="web" class="hideable" style="display:none">
				<div class="details">Web</div>
			</div>
			
		</div>

</body>
</html>

I'm sure it could be done better, but it works.
 
It works fine if you force IE to standards mode (in IE8 go to Tools > Developer Tools then change the 'Document Mode' at the top right to IE8 standards). You need to clear up all your HTML errors and then it should work for everyone:

http://validator.w3.org/check?verbose=1&uri=http://www.swychmedia.com/projects/portfolio/index.php

It's currently in quirks mode because of the errors which means anything goes in terms of what it might display :p.

If you use Firefox then this is great for quickly testing if your site is valid. I use it all the time.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom