Welcome to WebmasterWorld Guest from 54.162.93.137

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)



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 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.
10:53 am on Jun 27, 2011 (gmt 0)

5+ Year Member



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 Jun 27, 2011 (gmt 0)



ProbablyMike that works perfectly! Thank you (both of you), for your help.
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
9:29 am on Jun 28, 2011 (gmt 0)

5+ Year Member



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



Awesome, thanks again!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month