NickEscobedo.com
My thoughts on technology and random things.


How-To's

October 11, 2011

How To Use One JavaScript Function to Slide Any HTML Element Up and Down with JQuery

More articles by »
Written by: Nick Escobedo
Tags: , , , ,

In this guide I’ll show you how to use one JavaScript function to slide any HTML element up and down with JQuery by simply sending the JavaScript function the id of an element.

As I was creating a web application I realized that I had created multiple functions to handle the sliding up and down of different HTML elements. It’s very inefficient to have multiple functions or pieces of code that do the same thing. If you’ve taken programming classes you were probably told to use loops and method/functions when ever possible. Using methods and functions can save bandwidth and make web pages load faster because file sizes are smaller.

JavaScript function

Source code    
function slideUpDown(slider){
	if($("#" + slider).is(":hidden"))
		$("#" + slider).slideDown('slow');
	else
		$("#" + slider).slideUp('slow');
}

Function slideUpDown takes in one parameter, which should be the id of the HTML element you want to slide up or down. It takes that id and checks whether it’s currently hidden. If the element is hidden it will slide the element down else it will slide it up to hide it.  Of course this function can be modified to use classes instead of ids, you would simply replace the “#” with “.”

HTML

Source code    
<button onClick="slideUpDown('slide-text')">Slide Paragraph</button>
<div id="slide-text">
	<p>Sliding paragraph</p>
</div>

In this example I used a button to slide the div up and down, but you could use anything. The key here is the call to the JavaScript function with the id. The  div isn’t require around the paragraph in order to work, I just prefer to have elements surrounded by div’s.

If you have any questions feel free to leave a comment or email me at nick@nickescobedo.com.



About the Author

Nick Escobedo
Graduated in May of 2012 from the University of Wisconsin-Whitewater. Currently freelancing, but looking for full time opportunities in downtown Chicago.




  • Vani

    not working it is not sliding up and down

    • http://nickescobedo.com Nick Escobedo

      If you send me your code I can help.

  • Amol

    Hi, do you know how to use slideUp up to SHOW elements instead of hide?

    • http://nickescobedo.com Nick Escobedo

      Can you explain a little more please? This function will show the element if it’s hidden and hide it if it’s show.

  • Ben

    If I wanted clicking a button to hide content under other buttons, how would I do that? For instance, if user clicks Button 1, Content 1 is displayed under it like normal. If user then clicks Button 2 with Content 1 still displayed, SlideDown Content 2 and SlideUp Content 1.

    • http://nickescobedo.com Nick Escobedo

      Ben please see my gist.
      https://gist.github.com/nickescobedo/6171092
      Let me know if you have any further questions.

      • Ben

        I figured out another way to do it while I was waiting. I don’t know if it’s more elegant, but I’ll show you:

        I had another function:

        function slideUp(slider){

        $(“#” + slider).slideUp(‘slow’);

        }

        And in each custom html, I slid up the id’s of all of the other button contents. To see it in action, http://www.benroye.com/kraven-manor.html

        • Ben

          Thanks for your quick response though!!

        • http://nickescobedo.com Nick Escobedo

          Yup that works too. Just two different approaches. I’m glad it worked out for you. You’re welcome happy to help!