Jump to content

jQuery slideUp() and slideDown() example

Recommended Posts



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 post
Share on other sites




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:




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 post
Share on other sites



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>




All I basically did was to paste the:


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


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






$("#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





$("#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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...