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

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 [email protected].

Share this Story
Load More Related Articles
  • PHP Programming

    PHP Type Hinting Arrays Using The Splat Operator

    It’s possible to type hint an array (sort of) in PHP without using a Doc block. Version 5.6 added a splat ...
  • Laravel

    Laravel Upgrade Considerations and Tips

    Laravel claims estimated upgrade times upgrading version to version, but this estimation may not be true for you. Upgrades take time ...
  • PHP

    Using array_reduce to Transform Data

    First, why we might transform data? If we have raw data from a database and need to send data to an ...
  • Programming

    Selecting Your Next App Dependency

    We often turn to open source or proprietary packages for adding functionality to our apps. Here are some key points and questions to ask when selecting your next dependency.
  • Tips


    As developers we work with non-technical people and we can do a better job connecting with them. Non-technical people don’t care ...
  • Life Pro Tip Tips

    Mental Snapshots

    Think back to a time where you accomplished something you had no idea how to do or when you accomplished something ...
Load More By Nick Escobedo
Load More In How-To's

Check Also

PHP Type Hinting Arrays Using The Splat Operator

It’s possible to type hint an array (sort ...