homepage Welcome to WebmasterWorld Guest from 54.226.21.57
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JQuery Slidedown
Using JQuery to create an animated content panel
rwilson



 
Msg#: 4330757 posted 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



 
Msg#: 4330757 posted 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

5+ Year Member



 
Msg#: 4330757 posted 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



 
Msg#: 4330757 posted 3:07 pm on Jun 27, 2011 (gmt 0)

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

rwilson



 
Msg#: 4330757 posted 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

5+ Year Member



 
Msg#: 4330757 posted 9:29 am on Jun 28, 2011 (gmt 0)

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

rwilson



 
Msg#: 4330757 posted 12:32 pm on Jun 28, 2011 (gmt 0)

Awesome, thanks again!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved