Togglable DL 2.0
Created Sunday 31st of August 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
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);
});
});
});
});
};