dttoggle - demo page

About

This is a demo page for the jQuery dltoggle plugin. The markup is plain, and the javascript is merely:

 //
 // Make all definition lists togglable - give different images.
 //
 $('#dl1').dltoggle();
 //
 //  Leave this one open, and set different images.
 //
 $('#dl2').dltoggle({ "open-image"   : "minus.gif",
                      "closed-image" : "plus.gif",
                      "leave-open"   : 1  });
 //
 //  Set different images, but keep the default behaviour otherwise.
 //
 $('#dl3').dltoggle({ "open-image"   : "folder-open.gif",
                      "closed-image" : "folder-closed.gif" });

Demo #1

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 ]

Demo #2

Demo 2- Click Me

As you can see the first element is visible.

Demo 2- Click Me

This one is still visible because we passed "leave-open => 1" as the options.

Demo 2- Click Me

This one is open too.

[ Open all | Close all ]

Demo #3

Click Me #1

As you can see the first element is still visible.

Click Me #2

This one, and all later ones are hidden by default.

Click Me #3

This one, and all later ones are hidden by default.

[ Open all | Close all ]

Links

• dltoggle homepage
• jQuery index