Jump to content

jQuery slideUp() and slideDown() example


Neo

Recommended Posts

Hi

 

I'm missing an example about how to combine a jQuery slideUp() and slideDown() effect.

 

I'm well aware that I could use the slideToggle(), but this method is not always suitable.

 

So may I suggest that such an example being added to the section example section of jQuery Effects - Sliding http://www.w3schools.com/jquery/jquery_slide.asp

 

Thank you in advance

 

Link to comment
Share on other sites

 

Hi

 

Thank you for providing the link.

 

However, this is, as far as I could tell, exactly the method I didn't wish to use as it appear to be just another slideToggle() and not a slideUp() and slideDown() effect.

 

ie. what I would have liked; were an example added to the list of examples where the slideUp() and slideDown() effect were used together.

 

Let me give an example by using the link I have provided as a starting point:

 

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down

 

What I would like to see, is an example of how to make a button or a link at the bottom of the unfolding panel which will close/fold the panel again.

Link to comment
Share on other sites

Hi

 

I did some experimentation as I don't really know anything about jquery - yet !

 

However, I did manage to make something which I guess will do what wish:

 

<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#open").click(function(){ $("#panel").slideDown("slow"); }); $("#close").click(function(){ $("#panel").slideUp("slow"); });});</script> <style type="text/css">#panel,#open,#close{/*padding:5px;*/text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel{Width: 596px;height: 400px;display:none;}

 

#main_content {

Width: 596px;height: 400px;

}</style></head><body> <div id="open">Click to slide down panel</div><div id="panel"><div id="main_content">Main conten goes here</div><div id="close">Click to close panel</div>

</div>

</body></html>

 

All I basically did was to paste the:

 

$("#close").click(function(){ $("#panel").slideUp("slow"); });

 

and renaming one of the $("#name").click(function(){ from

 

$("#flip").click(function(){

 

to

 

$("#close").click(function(){ in order to prevent the panel from closing the very minute I open it. I have also take the liberty to renaming the other

$("#flip").click(function(){

 

to

 

$("#open"), so it easier to fully distinguish between them.

 

I hope this example will be helpful for others whom have similar problems with panels.

 

I also hope that the developers of w3schools will make an example like the one I have provided and add it to the example section like I requested in my initial post.

 

Link to comment
Share on other sites

when it slides Up it finishes with display: none, use that to check if showing or hiding and apply appropriate slide animation.

$(document).ready(function(){  $("#flip").click(function(){$("#panel").css('display')=='none' ? $("#panel").slideDown("slow") : $("#panel").slideUp("slow");  });});  
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...