Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: open

Message Too Old, No Replies

JQuery Slidedown

Using JQuery to create an animated content panel

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

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 186
votes: 2


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!
3:28 am on June 25, 2011 (gmt 0)

New User

joined:June 21, 2011
posts: 27
votes: 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.
10:53 am on June 27, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 25, 2009
posts: 25
votes: 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>
3:07 pm on June 27, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 186
votes: 2


ProbablyMike that works perfectly! Thank you (both of you), for your help.
6:35 pm on June 27, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 186
votes: 2


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
9:29 am on June 28, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 25, 2009
posts: 25
votes: 0


No need to any if or anything, use [api.jquery.com...]
12:32 pm on June 28, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 186
votes: 2


Awesome, thanks again!