Slide Open, Slide Close With jQuery

Recently, a friend and client had an issue with an image sliding open in a WordPress theme.

When I looked at the code, I couldn't believe how complicated it was. Nothing intended for intermediate skills should be as convoluted as that code was.

So I set out to simplify things.

This article's examples use jQuery version 1.11.3. There's no need to load version 2.# or specialized versions unless you need them for other things. Loading version 2.# won't interfere with the code in this article. Loading specialized versions is unlikely to interfere, but then I don't know what you're going to load :-)

jQuery can be downloaded so it's accessible from your server or you can import the CDN (acronym stands for "Content Delivery Network") from the code.jquery.com server. You'll find information for that and other options at the Downloading jQuery page.

To use jQuery, you'll need to have it available on your server or import it from a CDN.

Slide Open, Slide Close Examples

Here are examples to show, hide, and toggle the display of images.

Show image

Hide image

Toggle image

The Show image and Hide image links work only once unless you reload the page. The Toggle image works every time it's clicked.

The content that's revealed or undisplayed when the link is licked doesn't have to be an image. Any valid HTML content can be published, including forms and videos and regular text content.

Sliding Show/Hide Implementation Info

There are four parts to implementing a sliding display/undisplay div, two are HTML parts and two are JavaScript parts:

A. HTML parts

1. The content to display or undisplay: The content needs to be in a div with an id value. It also needs an inline CSS declaration: display:none for sliding it open, display:block for sliding it closed, or either of those for a toggle div depending whether you want to start with the content displayed or undisplayed. Example:

   <div id="content-to-display" style="display:none;">
      <img src="//www.willmaster.com/08images/wslogo150x156.jpg" 
      alt="WebSite's Secret" 
      style="width:150px; height:156px; border:1px solid #ccc; border-radius:9px; outline:none;"
      title="WebSite's Secret logo">
   </div>
   

   The id value colored blue is referred to in the next step.

2. The link to click or tap: The link in this code is to the ShowContent() function for displaying the content. (To undisplay content instead of displaying it, use HideContent instead of ShowContent and to toggle the display, use ToggleContentDisplay)

   <a href="javascript:ShowContent('content-to-display')">Show image</a>
   

   The id value colored blue is the same id value as the div containing the content to display when the link is clicked.

B. JavaScript parts

1. The jQuery code: This page uses jQuery code imported from the jQuery CDN. (See Downloading jQuery for other options.)

   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
   

   The jQuery code needs to be on the page somewhere above the display/undisplay code.

   The // at the beginning of the src URL tells the browser to use http or https, whichever was used to load the web page. If the web page is at http://example.com/page.html, then the browser would use URL http://code.jquery.com/jquery-1.11.3.min.js and if the web page is at https://example.com/page.html, the browser would use https://code.jquery.com/jquery-1.11.3.min.js. It's a convenience that lets you paste the same code on secure and non-secure web pages without modification.

2. The display/undisplay code: Paste this into your web page somewhere below the jQuery code. No edits required, unless you want to adjust the speed of the content display/undisplay. (See "Advanced Options" further below for links to additional things you can do.)

   <script>
   function ShowContent(div)
   {
     $("#"+div).slideDown(500);
   }
   function HideContent(div)
   {
     $("#"+div).slideUp(500);
   }
   function ToggleContentDisplay(div)
   {
     $("#"+div).slideToggle(500);
   }
   </script>
   

   The 500 parameter (colored red above) is the number of milliseconds to elapse while displaying or undisplaying the content.

   Adjust the number of milliseconds as desired. Or use "slow" or "fast" (with quotes). "slow" is equivalent to 600 milliseconds and "fast" is equivalent to 200 milliseconds.

Test the page with your sliding show/hide functionality before you go live with it.

Advanced Options

Options outside the scope of this article (links follow) include, among other things, an easing directive (speed of animation at different points within the animation), a way to run a function when the animation begins, and a way to run a function when the animation completes,

If you wish to read up on additional options available for the slideDown(), slideUp(), and slideToggle() functions, see these links:

• SlideDown()
• slideUp()
• slideToggle()

With the information and code in this article, you now have a relatively simple way to implement sliding show/hide content.

(This article first appeared in Possibilities ezine.)

Will Bontrager