Neo 0 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 Quote Link to post Share on other sites
harpalsinh999 0 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 Quote Link to post Share on other sites
Neo 0 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. Quote Link to post Share on other sites
Neo 0 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. Quote Link to post Share on other sites
dsonesuk 925 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"); });}); Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.