PE

Here’s a lightweight snippet for creating a collapsable defintion list. A client wanted a way to present a large page of text with some sections collapsed. The site is also built in CMS so I wanted a solution that tapped into semantic code that would easy to create and edit using a wysiwyg editor. TinyMCE in this case. I’ll set up an example page if anyone wants it. Let me know.

Simply write a simple definition list using semantic code. No classes necessary - hooray!

<dl>
  <dt>Definition term here will be clickable</dt>
  <dd>Definition description here will hide and show when corresponding term is clicked</dd>
</dl>

Here’s the Javascript for the jQuery. I’ve also added a class to show a different icon for expanded and collapsed definition terms.

$(document).ready(function() {
  // set all <dt> elements CSS classes to contracted for icon
   // and hide their corresponding <dd> element
  $(’dt’).addClass(’contracted’);
  $(’dd’).hide();
  // set <dt> toggle function to expand/contract the following <dd> element
   // and toggle the contracted CSS class to switch the icon
  $(’dt’).toggle(function() {
    $(this).removeClass(’contracted’);
    $(this).next().fadeIn();
  }, function() {
    $(this).next().fadeOut(’normal’,function() {
       $(this).prev().addClass(’contracted’) // class is added in the callback to chain events
    });
  });

});

It’s worth pointing out that each definition term <dt> will need it’s corresponding description <dd> as the clicks are targeting the next element. Try it and see what happens. Also, it’s a good idea to create some CSS rules to style the <dt> elements with an appropriate hover style. You can do this will jQuery or just CSS using a dt:hover (not strictly standards compiant but understood by most browsers).

This entry was posted on Wednesday, October 15th, 2008 at 10:42 pm and is filed under jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.