Neo Posted September 21, 2013 Report Share Posted September 21, 2013 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 More sharing options...
harpalsinh999 Posted September 21, 2013 Report Share Posted September 21, 2013 (edited) http://www.thatagency.com/design-studio-blog/2009/02/up-and-down-slider-using-jquery/ GO TO URL SEE DEMO AND DOWNLOAD CODE Edited September 21, 2013 by harpalsinh999 Link to comment Share on other sites More sharing options...
Neo Posted September 21, 2013 Author Report Share Posted September 21, 2013 http://www.thatagency.com/design-studio-blog/2009/02/up-and-down-slider-using-jquery/ GO TO URL SEE DEMO AND DOWNLOAD CODE 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 More sharing options...
Neo Posted September 21, 2013 Author Report Share Posted September 21, 2013 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 More sharing options...
dsonesuk Posted September 22, 2013 Report Share Posted September 22, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now