Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

jQuery - Vertical Show/Hide using slideToggle()

Last Update: 9.20.2009

Introduction

A common use of JavaScript libraries is to hide content initially, and then display it on a click or hover, often with an animated effect. This article demonstrates using the slideToggle() function to show and hide items in a definition list.


Demonstration

Here's a definition list. Click on one of the baked goods below to reveal the description:

Bat Cupcakes
These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping. The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.
Jam Cookies
Start with a tube of premade sugar cookie dough. Press a cookie-sized amount into mini-muffin pans and then bake as directed. Dust the cookie cups with powdered sugar. Microwave some jam (raspberry and mint) and spoon it into the cookie cups. Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.
Chocolate Sprinkle Cupcakes
These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.

Code

Here's the markup:

<dl class="v_show_hide">
  <dt>Bat Cupcakes</dt>
  <dd>These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping.  The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.  </dd>
  <dt>Jam Cookies</dt>
  <dd>Start with a tube of premade sugar cookie dough.  Press a cookie-sized amount into mini-muffin pans and then bake as directed.  Dust the cookie cups with powdered sugar.  Microwave some jam (raspberry and mint) and spoon it into the cookie cups.  Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.</dd>
  <dt>Chocolate Sprinkle Cupcakes</dt>
  <dd>These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.</dd>
</dl>

jQuery Code

Again, this is pretty dary simple to set up. Here's the jQuery code:

$(document).ready(function(){

  // Hide all dds
  $("dl.v_show_hide dd").hide();

  // When a dt is clicked,
  $("dl.v_show_hide dt").click(function () {

    // Toggle the slideVisibility of the dd directly after the clicked dt
    $(this).next("dd").slideToggle("slow")
    // And hide any dds that are siblings of that "just shown" dd.
    .siblings("dd").slideUp("slow");

  });

});

The second line selects all <dd>s that are inside a <dl> with a class of "v_show_hide", and hides them.

The third line selects all <dt>s that are inside <dl> with a class of "v_show_hide", and binds a click action to them.

The fourth line selects the <dd> that is directly after the clicked <dt>, and shows them using the slideToggle function.

The fifth line uses slideUp to hide any siblings of the "just shown" <dd>.

The last line simply closes the document ready function.


Browser Modifications?

Good news! No modifications to the code are required for different browsers. A very useful advantage of using a library like jQuery is that someone else generally takes care of the cross browser compatibility issues.

Note

The elements may appear to stutter or jump during the animation. I have resolved this in jQuery - Smooth Animation.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me