Slide Down Divs

mlmorg · 06-09-2008, 02:32 AM

Hi all,

I've created a div called block that slides down to reveal another div, block2, when rolled over. The problem is I'd like to work for multiple divs called block - and block2. I'm new to jquery and don't understand how to get an action to repeat for multiple items with the same name/id. Here's a quick test code page I did with all the elements:

Code:

<html>
	<head>
	<style type="text/css">

	#block {
		width:100px;
		background-color:#000;
		color:#fff;
		margin-bottom:2px;
	}
	
	#block2 {
		display:none;
	}

	</style>
		<title>Menu</title>
		<script src="jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function () {
				$("#block").hover(
					function () {
						$("#block2").slideDown("fast")
					},
					function () {
						$("#block2").slideUp("fast")
					}
				)
			});
		</script>
	</head>
	<body>
		<div id="block">
			Stuff
			<div id="block2">
				More Stuff<br />More Stuff<br />More Stuff<br />More Stuff
			</div>
		</div>
		<div id="block">
			Stuff
			<div id="block2">
				More Stuff<br />More Stuff<br />More Stuff<br />More Stuff
			</div>
		</div>
	</body>
</html>

Thanks for any help,

Matt

mlmorg · 06-09-2008, 02:06 PM

Ok figured it out...

Changed the id's to classes and wrote these lines instead:

Code:

$(document).ready(function () {
	$(".block").hover(
		function () {
			$(this).find(".block2").slideDown("normal")
		},
		function () {
			$(this).find(".block2").slideUp("normal")
		}
	)
});