Clicky

How-To's, HTML, JavaScript, Programming, Tech

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

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

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

<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.

Share this Story

Related Posts

  • 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!

Nate Alex: As far as I'm concerned it should stay in the background for ..

random linux user: thanks! ..

MWB21: Thanks for this, one question: What is a domain name and whe ..

How to configure Android 4 devices to use WiFi with WPA2 enterprise security | Quis custodiet ipsos custodes?: […] I followed the instructions given in a couple of a ..

Atif: amazing !!! worked like charm ..

Jose: Excellent guide, I ran into the same issue with Ubuntu 14.04 ..

Teen Inquirer: I have 802.1x EAP but when the username/password screen come ..

Conradino: What is domain name please. ..

Touqeer: I have the same problem with my andriod 4.2.2 It couldn.t co ..

shrtwhitebldguy: @nick_escobedo nice looking machine just need an OS to do it ..

I messed up my hard drive during a Plex Media Server tutorial. How can I fix this? | Ubuntu InfoUbuntu Info: […] incorrectly with the fstab text editor, so I start ..

NIrmal: Love u very very much... for the help.... ..

Sam: am on nexus 4S, it says network not in range, though on iPho ..

civilclerk1: Yes I am sure everything is being put in correctly. I am on ..

civilclerk1: I have programmed many iPhones and had no problem but when i ..

civilclerk1: I am using Android 4.1.2 ..

civilclerk1: Sorry Nick I didn't see the response until now. ..

Nick Escobedo: Thank you! Yea, this sort of thing would be nice if it were ..

JoePublic: Good find. However, this kind of thing is the reason Linux w ..

J: Doesn't work on my iPad. I use my US Netflix account in Cana ..

Nick Escobedo: What version of Android are you on? Are you sure it's a WPA2 ..

Nick Escobedo: Did you resolve your issue? If not send me a couple screensh ..

Nick Escobedo: I should have clarified that this solutions was only for a c ..

civilclerk1: I tried this and it didn't work ..

LLLoungelizard: Spotflux works ok but does not work with PlayStation, Xbox, ..

Nick Escobedo: I don't remember the exact commend, but I believe it involve ..

John Zeiger: How did you determine what version of php-common and php-soa ..

atasoyh: I need change DNS Suffix ? ..

hatasoy: I can connect Ipad and after change "search domains" , and a ..

Nick Escobedo: Yup that works too. Just two different approaches. I'm glad ..

Ben: Thanks for your quick response though!! ..

Ben: I figured out another way to do it while I was waiting. I do ..

Nick Escobedo: Ben please see my gist. https://gist.github.com/nickescobedo ..

Ben: If I wanted clicking a button to hide content under other bu ..

Nick Escobedo: I would try to do a reset on your router. Keep in mind doing ..

Nick Escobedo: You're welcome I'm glad it helped! ..

Nick Escobedo: Is the access point broadcasting the SSID? ..

Person123: My device does not actually display the network, but other c ..

Lauris Olups: I get an "invalid command:check" message, and then a list of ..

Akshay: Great article. My Binatone router is stuck on WPA2 Enterpris ..

Surbhi Sheth: Customize shipping, delivery and billing methods for your Ma ..

Nick Escobedo: Can you explain a little more please? This function will sho ..

Amol: Hi, do you know how to use slideUp up to SHOW elements inste ..

mr rowland: worked for me thanks!!! ..

Nick Escobedo: I'm unsure at this time. I haven't ran into this issue. If y ..

Nick Escobedo: Glad things worked out for you! ..

Nick Escobedo: What OS version are you running? ..

Nick Escobedo: You're welcome, I'm glad it worked! ..

Nick Escobedo: I didn't have to give a certificate. After you entered in ev ..

civilclerk1: I have the Samsung Galaxy SIII and have followed the steps a ..

Tom: I followed these instructions for my chromebook and it worke ..

Victor J Morin: Glad to hear that. I look forward to learning about them! :) ..

Nick Escobedo: I'll be bring it back shortly just for you. I have some grea ..

Victor Jay: what happened to your mobile app of the week holmes ..

El Travieso: Kudos to you Nick .. I've been searching on how to do this f ..

Nick Escobedo: Did you make sure to put in your domain before your username ..

Madhavi: hi i have done the same settings for my samsung galaxy table ..

Micky Duncan: thank-you sir! http://mickyd.wordpress.com ..

Civilclerk1: When I type in a password it doesn't do anything else. Am I ..

Nick Escobedo: If you send me your code I can help. ..

Vani: not working it is not sliding up and down ..

Enchantedsun: Really glad to have found this guide: thank you! Just one qu ..

Coolguy: Hi I m also using the same settings but my Phase 2 Authentic ..

David Longstreth: Worked! Thanks for posting this! ..

Mail: Worked the first time.  Thank you. ..

Topher: Ya I've tried several times making sure the password is righ ..

Nick Escobedo: I've encountered this issue with a non enterprise network. I ..

Topher: Nick, I have been using this method and my phone finds our n ..

Wy555: I have the same problem as yours. Have you found a way for W ..

Bernard Gyamfi: u are truly proffessional good job man ..

Nick Escobedo: You shouldn't need to configure those things. ..

LAWALFX2009: thanks for the information. BUT DO I CONFIGURE STATIC IP ,SU ..

Marc_david50: if my sister turn on the Portable Wi-Fi hotspot then i will ..

Nick Escobedo: You would have to probably pay them extra for them to try to ..

Bubblesprite13: so the same things happened to me and i want know if i can s ..

Guy Incognito: Thanks for the steps. I couldn't get connected so I looked t ..

Ankush Agarwal: Hey. Thanks for the description of the method. This was the ..

: I couldn't get it to work with an HTC Evo 4g ..

Nick Escobedo: The wep password is the password for the wifi you're trying ..

Katiegorman: what is the wep password for samsung galaxy plus ..

??????? ????????: thanks, this works ..

Henrijs Romans: Thanks, Nick! Your tutorial is really useful! ..

Nick Escobedo: Which tablet are you using and version of Android? ..

Eaintchuhlaing: could you kindly please help me with the android tablet ? Th ..

Nick Escobedo: Does the error message say anything besides "Error" and whic ..

Praveen Lobo: recently bought samsung galaxy Ace, it is not able to connec ..

Nakshatra: Hey.. Thanks a log. :) ..

Nick Escobedo: You're welcome! :) ..

Nick Escobedo: You bet!  ..

Nick Escobedo: You bet! :) ..

Nick Escobedo: You're welcome! :) ..

Logda: thanks a lot ..

Nick Escobedo: Which version of Android are you using? ..

Randy: I have a Samsung Galaxy S(I9000). To install the certificate ..

Roger Damo: Thanks for sharing! ..

Mitch Paschen: Hey, is it too late to get one of those invites? ..

Tony: Perfect! Thank you for your help! ..

Nick Escobedo: It's on an invite only basis. You can only get in if you've ..

Karen Peña: so i only heard about it i didn't know you could actually ge ..

Anthony Escobedo: I want one! hook a brotha up! ..

Jacob Israel Avery Foulker: Did that yesterday. ..

Nick Escobedo: Awesome, hope everything is working great! ..

Ramir Racelis: great.... thanks it works for me ramir ..

Nick Escobedo: Great, I'm glad I could help! :) ..

Ryan Done: Awesome, that worked great for me too! Thanks for sharing! ..

Nick Escobedo: You're welcome! The Acclaim has been out for a while now :). ..

Ben: Never mind I found the update! Thanks for the info, I've bee ..

Ben: Nick, is this update also available for the Samgsung Acclaim ..

Eva: Good to know! ..

Nick Escobedo: You're welcome! :) Yes, if possible scope out deals a head o ..

Eva: This is very new to me. Thanks for the info! Any buyer advic ..

Nick Escobedo: Auto run is the major feature I wish CCleaner had. Auslogics ..

Ralph: I like Auslogics Boostspeed. It can be set up to auto run th ..