dttoggle - jQuery definition list toggle plugin

About

This is a simple jQuery plugin which allows you to toggle the children of a definition list.

Basic usage is :

   $('#faq').dltoggle( options );

Only minimal options are supported right now:

Option	Meaning
closed-image	The image to use for closed lists.
open-image	The image to use for open lists.
leave-open	If set all elements are left open, see demo 2.

Demo

The following demo shows a simple definition list with three children (the border was added for emphasis):

Foo - Click Me

As you can see the first element is visible.

This is because we used the jQuery selector with ":not(:first)" to ensure it didn't match the first <dd> child.

Bar - Click Me

This one, and all later ones are hidden by default

Baz - Click Me

This one, and all later ones are hidden by default

[ Open all | Close all ]

The Code:

The code for this demo is in two parts:

Javascript

   //
   // Explicit options - which match the defaults.
   //
   $('#faq').dltoggle( { "open-image"   : "open.gif",
                         "closed-image" : "closed.gif" } );
   $("#open").click(function(event){
      $('#faq').dltoggle_show();
      return false;
   });
   $("#close").click(function(event){
      $('#faq').dltoggle_hide();
      return false;
   });

HTML

<dl id="faq">
 <dt>Foo : Click Me</dt>
  <dd><p>As you can see the first element is visible.</p></dd>
 <dt>Bar : Click Me</dt>
  <dd><p>This one, and all later ones are hidden by default</p></dd>
 <dt>Baz : Click Me</dt>
  <dd><p>This one, and all later ones are hidden by default</p></dd>
</dl>
<p>[<a href="#" id="open">Open</a>  | <a href="#" id="close">Close</a> ]</p>

There are a couple more lists on the demo page.

Links

Download the plugin from the following link:

• jquery.dltoggle.js 4k
• jquery.dltoggle.min.js 1.5k
• jQuery index