jquery .slideToggle Issue

[MaxSolaris]

Hi All,

I'm new to jquery and love it. I've been using it wherever I can.

Recently I've been using a .slideToggle script to show big images when thumbnails are clicked.

However, the <div> that is revealed does not Toggle Up when multiple thumbs are clicked, so I'm left with a bunch of open <div>s on the page.

I'm not sure what to do -- I think it has something to do with the siblings of the class "largeexamples" but I'm not sure. I've also been reading about eq, but I'm not there yet.

Thank you all in advance.
Max.

live:
ianscheller.com/thumbnail-menu/example-index.html

	<script src="js/jquery-1.3.2.js" type="text/javascript"></script>

	<script src="js/jquery.corner.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
		
		// rounded corner jquery
		$("#examplethumbscontainer").corner("rounded 12px");
		$(".thumbexampleonea").corner("rounded 12px");
		$(".thumbexampleoneb").corner("rounded 12px");
		$(".thumbexampleonec").corner("rounded 12px");
		$(".thumbexampleoned").corner("rounded 12px");
		$(".thumbexampleonee").corner("rounded 12px");
		$(".thumbexampleonef").corner("rounded 12px");			
		
		// set 1, example 1
		
		$('.thumbexampleonea').hide();
		$('a#showthumbexampleonea').click(function() {
		$('.thumbexampleonea').slideToggle('slow');
		return false;
		});
		
		// set 1, example 2
		$('.thumbexampleoneb').hide();
		$('a#showthumbexampleoneb').click(function() {
		$('.thumbexampleoneb').slideToggle('slow');
		return false;
		});
		
		// set 1, example 3
		$('.thumbexampleonec').hide();
		$('a#showthumbexampleonec').click(function() {
		$('.thumbexampleonec').slideToggle('slow');
		return false;
		});
		
		// set 1, example 4
		$('.thumbexampleoned').hide();	
		$('a#showthumbexampleoned').click(function() {
		$('.thumbexampleoned').slideToggle('slow');
		return false;
		});
		
		// set 1, example 5
		$('.thumbexampleonee').hide();
		$('a#showthumbexampleonee').click(function() {
		$('.thumbexampleonee').slideToggle('slow');
		return false;
		});
		
		// set 1, example 6
		$('.thumbexampleonef').hide();
		$('a#showthumbexampleonef').click(function() {
		$('.thumbexampleonef').slideToggle('slow');
		return false;
		});
	
		});
	</script>
	
	<style type="text/css">
	
	body{background-color: #fff; font-family: Tahoma; padding: 0em; margin: 0em;}
	
	img{border: none;}
	
	a {border: none; outline: none; text-decoration: none;}
	a:link{border: none; outline: none; text-decoration: none;}
	a:visited{border: none; outline: none; text-decoration: none;}
	a:hover{border: none; outline: none; text-decoration: none;}
	
	h1{border: none; font-size: 3.5em; font-weight: normal; letter-spacing: normal; margin: 0em; padding: 0em;}
	h2{color: gray; font-size: 1.2em; font-weight: normal; margin: 0em; padding: 0em;}
	h3{color: gray; font-size: 1em; font-weight: bold; margin: 1em 0em .5em 1.5em; padding: 0em;}

	p {font-size: .9em; line-height: 1.2em; text-align: left;}
	
	.fullsize{border: none; margin: 5em auto 5em auto; padding: 0em auto 0em auto; width: 500px; height: 500px;}
	
	/*container one*/
	#examplethumbscontainer{background-image: url('images/thumbcontainerbg.gif'); margin: 5em auto 1em auto; padding: 0em auto 0em auto; width: 910px; height: 170px;}
	#examplethumbscontainer ul{border: none; margin: 0em auto 0em auto; padding: 0em; width: 900px; height: 100px;}
	#examplethumbscontainer li{border: none; background: url('images/example-thumbs/thumb-drop-shadow.png') no-repeat 0 0; display: inline; float: left; line-height: 0em; list-style: none; padding: 4px 7px 18px 5px; margin: 0em 0em 0em .95em;  width: 120px; height: 90px;}
	
	.thumbexampleonea{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
	#showthumbexampleonea{border: none;}
	
	.thumbexampleoneb{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
	#showthumbexampleoneb{border: none;}
	
	.thumbexampleonec{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
	#showthumbexampleonec{border: none;}
	
	.thumbexampleoned{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
	#showthumbexampleoned{border: none;}
	
	.thumbexampleonee{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
	#showthumbexampleonee{border: none;}
	
	.thumbexampleonef{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
	#showthumbexampleonef{border: none;}
	
	</style>

</head>

<body>

<div id="bigdiv">
	
	<!-- example container -->

	
	<div id="examplethumbscontainer">
		<h3>Example Thumbs</h3>
			<ul>
				<li><a href="#" id="showthumbexampleonea"><img src="images/example-thumbs/1.jpg" alt="Image 1"></a></li>
				<li><a href="#" id="showthumbexampleoneb"><img src="images/example-thumbs/2.jpg" alt="Image 2"></a></li>
				<li><a href="#" id="showthumbexampleonec"><img src="images/example-thumbs/3.jpg" alt="Image 3"></a></li>
				<li><a href="#" id="showthumbexampleoned"><img src="images/example-thumbs/4.jpg" alt="Image 4"></a></li>
				<li><a href="#" id="showthumbexampleonee"><img src="images/example-thumbs/5.jpg" alt="Image 5"></a></li>

				<li><a href="#" id="showthumbexampleonef"><img src="images/example-thumbs/6.jpg" alt="Image 6"></a></li>
			</ul>
	</div>
	
	<div class="largeexamples">
		<div class="thumbexampleonea">
		<img src="images/example-fullsize/1.jpg" alt="Image 1 Full Size" class="fullsize">
		</div>
		
		<div class="thumbexampleoneb">
		<img src="images/example-fullsize/2.jpg" alt="Image 2 Full Size" class="fullsize">

		</div>
		
		<div class="thumbexampleonec">
		<img src="images/example-fullsize/3.jpg" alt="Image 3 Full Size" class="fullsize">
		</div>
		
		<div class="thumbexampleoned">
		<img src="images/example-fullsize/4.jpg" alt="Image 4 Full Size" class="fullsize">
		</div>
		
		<div class="thumbexampleonee">
		<img src="images/example-fullsize/5.jpg" alt="Image 5 Full Size" class="fullsize">

		</div>
		
		<div class="thumbexampleonef">
		<img src="images/example-fullsize/6.jpg" alt="Image 6 Full Size" class="fullsize">
		</div>
	</div>
	
	<!-- end example container and example div -->

</div>

</body>
</html>

[cooper.semantics]

I got rid of the js corners and replaced with the border radius for the more advanced browsers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<!-- Testing -->
		<base href="http://ianscheller.com/thumbnail-menu/" />
 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<title>Test Thumb Menu</title>
 
		<link rel="stylesheet" href="portfolio-resume.css" media="screen" />
		<style type="text/css">
		<!--
			html, body, div, h1, h2, h3, ul, li { 
				margin: 0;
				padding: 0;
			}
			body { 
				background: #fff; 
				font-family: Tahoma, sans-serif; 
				letter-spacing: 0; 
			}
			img { 
				border: none; 
				vertical-align: bottom;
			}
			a {
				outline: none; 
				text-decoration: none;
			}
			li { list-style: none; }
			h1, h2, h3 { font-weight: normal; }
			h1 { font-size: 3.5em; }
			h2, h3 { color: gray; }
			h2 { font-size: 1.2em; }
			h3 {
				margin: 1em 0 .5em 1.5em;
				font-size: 1em; 
				font-weight: bold; 
			}
			p {
				font-size: .9em; 
				line-height: 1.2; 
			}
			.fullsize { 
				margin: 5em auto; 
				width: 500px; 
				height: 500px;
			}
			#examplethumbscontainer {
				background: url("images/thumbcontainerbg.gif"); 
				margin: 5em auto 1em;
				padding: 5px 0 0;
				width: 910px; 
				height: 165px;
			}
			#examplethumbscontainer, .largeexamples div {
				-moz-border-radius: 12px;
				-webkit-border-radius: 12px;
				border-radius: 12px;
			}
			#examplethumbscontainer ul {
				margin: 0 auto;
				width: 900px; 
				height: 100px;
			}
			#examplethumbscontainer li {
				float: left; 
				display: inline; 
				margin-left: .95em;  
				padding: 4px 7px 18px 5px; 
				width: 120px; 
				height: 90px;
				background: url("images/example-thumbs/thumb-drop-shadow.png") no-repeat; 
			}
			.largeexamples div { 
				display: none;
				margin: 0 auto 1em; 
				width: 910px;
				background: gray; 
				text-align: center;
			}
		-->
		</style>
 
		<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
		<script type="text/javascript">
		<!--
			$(function() {
				$("li a").click(function() {
					var item = $(this).attr("id");
					var replace = "." + item.replace("show","");
					$(replace).slideToggle('slow');
					$(".largeexamples div").not(replace).hide();
 
					return false;
				});
			});
		-->
		</script>
	</head>
 
	<body>
 
		<div id="examplethumbscontainer">
			<h3>Example Thumbs</h3>
			<ul>
				<li><a href="#" id="showthumbexampleonea"><img src="images/example-thumbs/1.jpg" alt="Image 1" /></a></li>
				<li><a href="#" id="showthumbexampleoneb"><img src="images/example-thumbs/2.jpg" alt="Image 2" /></a></li>
				<li><a href="#" id="showthumbexampleonec"><img src="images/example-thumbs/3.jpg" alt="Image 3" /></a></li>
				<li><a href="#" id="showthumbexampleoned"><img src="images/example-thumbs/4.jpg" alt="Image 4" /></a></li>
				<li><a href="#" id="showthumbexampleonee"><img src="images/example-thumbs/5.jpg" alt="Image 5" /></a></li>
				<li><a href="#" id="showthumbexampleonef"><img src="images/example-thumbs/6.jpg" alt="Image 6" /></a></li>
			</ul>
		</div>
 
		<div class="largeexamples">
			<div class="thumbexampleonea"><img src="images/example-fullsize/1.jpg" alt="Image 1 Full Size" class="fullsize" /></div>
			<div class="thumbexampleoneb"><img src="images/example-fullsize/2.jpg" alt="Image 2 Full Size" class="fullsize" /></div>
			<div class="thumbexampleonec"><img src="images/example-fullsize/3.jpg" alt="Image 3 Full Size" class="fullsize" /></div>
			<div class="thumbexampleoned"><img src="images/example-fullsize/4.jpg" alt="Image 4 Full Size" class="fullsize" /></div>
			<div class="thumbexampleonee"><img src="images/example-fullsize/5.jpg" alt="Image 5 Full Size" class="fullsize" /></div>
			<div class="thumbexampleonef"><img src="images/example-fullsize/6.jpg" alt="Image 6 Full Size" class="fullsize" /></div>
		</div>
 
	</body>
</html>

[MaxSolaris]

Cooper,

Thanks for your added help with the corners. I actually just solved this -- after reading jquery forums and posts for the past three days, I just came up with a really simple solution:

I just tell jquery to close all the other <divs> once it has opened up the new one. A portion of the final code looks like this:

$('a#showthumbexampleonea').click(function() {
$('.thumbexampleonea').slideToggle('slow');
$('.thumbexampleoneb').slideUp();
$('.thumbexampleonec').slideUp();
$('.thumbexampleoned').slideUp();
$('.thumbexampleonee').slideUp();
$('.thumbexampleonef').slideUp();
return false;
});

It is a bit long winded, but for now it is working in FF, Safari and once Active X is allowed in IE 7, it is working there too!

Now just need some more styling, and I'll be all set.

MSolaris

[MaxSolaris]

Just demoed your code Cooper, and it is much more compact. In the long-winded version I worked out, the scroll does not completely remove, so the page does not jump with the removal and addition of the scroll bar. Just a lucky code on my part.

Really appreciate your suggestion.

Thanks!

[cooper.semantics]

the scroll does not completely remove, so the page does not jump with the removal and addition of the scroll bar.

html {
    margin: 0 0 1px;
    height: 100%;
}

Great Ref:
http://visualjquery.com/