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);
});
});
});
});
};
