JQuery Slidedown

Forum Moderators: open

Message Too Old, No Replies

JQuery Slidedown

Using JQuery to create an animated content panel

rwilson

8:38 pm on Jun 24, 2011 (gmt 0)

I'm trying to create a simple jquery slidedown panel


<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 

 $(".expandthis").click(function() {
 $.next("div").slideDown();
 });

</script>

<style type="text/css">

.awareSliderContent {display:none;}

</style>

<div>
 <div>Test Content</div>
 <a href="#" class="expandThis">Click me!</a>
 <div class="awareSliderContent">Test Content</div>
</div>

What I want to happen is when the link is clicked the div immediately underneath slides down. I haven't been able to get this to work, so any help would be greatly appreciated!

pokra

3:28 am on Jun 25, 2011 (gmt 0)

I don't know a lot about jquery but I suggest you look at jquery Accordion. I believe the functionality is the same. Comparing your codes to that might help.

ProbablyMike

10:53 am on Jun 27, 2011 (gmt 0)

Couple of things wrong with this.

1: As it is, you JavaScript is running too soon, before the rest of the page exists, you need to run on jQuery document ready.

2: $(".expandthis") and you have <a href="#" class="expandThis">, note the capital T on This

3: $.next won't work, you're not telling jQuery the next of what? $(this) is the current jQuery object.

4: Your JavaScript would be better out of the body.

Here's what I came up with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>
 <title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".expandThis").click(function() {
$(this).next("div").slideDown();
});
});
</script>

<style type="text/css">

.awareSliderContent {display:none;}

</style>
</head>

<body>


<div>
<div>Test Content</div>
<a href="#" class="expandThis">Click me!</a>
<div class="awareSliderContent">Test Content</div>
</div>
</body>

</html>

rwilson

3:07 pm on Jun 27, 2011 (gmt 0)

ProbablyMike that works perfectly! Thank you (both of you), for your help.

rwilson

6:35 pm on Jun 27, 2011 (gmt 0)

How would I go about having it slide back up? I'd want it to slide up by clicking the same element with "expandThis"

Would that need an if statement? somehow recognizing if the following div wasn't display:none then slideup when clicked

ProbablyMike

9:29 am on Jun 28, 2011 (gmt 0)

No need to any if or anything, use [api.jquery.com...]

rwilson

12:32 pm on Jun 28, 2011 (gmt 0)

Awesome, thanks again!