...

View Full Version : 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:



<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:



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum