jQuery - Vertical Show/Hide using slideToggle()

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
• The Code
• jQuery Explanation
• Broswer Modifications?
• Note

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:

  
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.

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