Togglable DL 2.0
Created Sunday 31st of August 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
What it Does
Use this plug-in on your definition-lists (dl-elements) to allow the dd:s for a dt to be toggled when clicking the dt. Don't use it unless it's semantically a definition list of some kind though :)
How to Use
jQuery('#faq dl').togglableDL(); would make every dl in #faq 'togglable'.
Example
- Who are you?
- Me
- Where do you live?
- Here
Example Code
HTML
<div id="jquery-togglable-dl-example">
<dl>
<dt>Who are you?</dt>
<dd>Me</dd>
<dt>Where do you live?</dt>
<dd>Here</dd>
</dl>
</div>
JS
jQuery('#jquery-togglable-dl-example dl').togglableDL();
Source Code
jQuery.fn.togglableDL = function (conf) {
var config = jQuery.extend({
speed: 100
}, conf);
return this.each(function () {
var dds = jQuery('dd', this).slideUp(config.speed);
jQuery('dt', this).each(function () {
var dt = jQuery(this);
dt.html('<a href="#">' + dt.html() + '</a>').find('a').toggle(function () {
var isDT = false;
dt.nextAll().each(function () {
if (isDT || jQuery(this).is('dt')) {
isDT = true;
return;
}
jQuery(this).slideDown(config.speed);
});
},
function () {
var isDT = false;
dt.nextAll().each(function () {
if (isDT || jQuery(this).is('dt')) {
isDT = true;
return;
}
jQuery(this).slideUp(config.speed);
});
});
});
});
};
Random jQuery Plug-ins
Ajax Loader
Use this plug-in when you want to inform your visitors that a certain part of your page is currently loading. The plug-in adds a faded 'loading-div' o...
Center
This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.
Togglable DL
Use this plug-in on your definition-lists (dl-elements) to allow the dd:s for a dt to be toggled when clicking the dt. Don't use it unless it's semant...
