jQuery makes is very easy to create great looking slide toggle effects. Let’s say you want users to be able to expand on some content or add a caption to a photo. We can do this easily with jQuery’s slideToggle method and a simple click function.

jQuery Slide Toggle Demo and Tutorial

How to Create Expandable Content Elements

For this situation we’ll imagine we are creating a “team member” page where we display a user profile image and some content to the right of it with the option to expand on it more. Check out this demonstration, click on the “Read More” to toggle more information about our team:

Jim Doe – CEO slideToggler

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore Read More »

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

  • Dolor sit amet
  • Consectetur adipisicing
  • Sed do eiusmod

John Doe – Lead slideToggler

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Read More »

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

jQuery Dev Team

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Read More »

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

  • Dolor sit amet
  • Consectetur adipisicing
  • Sed do eiusmod

The HTML

The first step to recreating the above effect on your next web project will be to setup a similar DOM structure as the above. Here’s the HTML for the example. Simply open up a new HTML document and paste this in between your body tags:

The CSS

We have to make this look good and we’ll do that with our stylesheet. Nothing too fancy here, just a clean layout with some nice borders. Please keep in mind that the styles shown below do no include a container element. You’ll have to add a container as seen in the demo that is available for you to download. If you have questions with the stylesheet please refer to the video screencast and post in the comments below.

The jQuery Function

Essentially what the function we are coding will do is expand and collapse the “.toggleMe” div element when a user clicks on the “.toggler” link. Add the function below to the head of your document to implement the slide functionality.

Code Explanation

The function above is selecting all ‘.toggler’ elements in the DOM and attaching the jQuery click() method to them which in turn will fire off a function whenever a user clicks on that element. Once a user clicks on that element the function will look at which parent element has been clicked and select the child “.toggleMe” element to expand. There are a variety of ways to write this effect into a function; I find this works best for me when I have multiple elements in the DOM with the same class.

Watch me Create the Demo

Here’s me coding the demo from scratch so you can see what goes into creating this popular jQuery effect.

Expanding on this Demo

Obviously this demo is just scratching the surface of what is possible with sliding panels. You can easily change the click event to a hover event for instance and also toggle classes and graphics to indicate whether the panel is open or closed. Like WordImpress on Facebook to keep updated on future demo releases and also leave a comment!

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

4 Responses to “jQuery slideToggle Tutorial and Live Demo”

  1. Brian Krogsgard

    Nice post. This is simpler than I anticipated.

    Reply
  2. Brian Krogsgard

    Nice post. This is simpler than I anticipated.

    Reply
  3. KCDOTwriter

    Can this be modified to change the toggle link text – as, for example, “More” would become “Less” when the sliding div is visible?

    Reply
  4. KCDOTwriter

    Can this be modified to change the toggle link text – as, for example, “More” would become “Less” when the sliding div is visible?

    Reply

Leave a Reply