Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Slide Down Divs

  1. #1
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slide Down Divs

    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

  • #2
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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")
    		}
    	)
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •