The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks.

The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ‘section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.

Markup

Since we’re practising unobtrusive JavaScript, the markup will start with headings separating the list items.

There’s two approaches depending on your content. Either to use list elements or definition lists. Our example will use list elements.

<ul class="drawers">
  <li class="drawer">
    <h2 class="drawer-handle open">Downloads</h2>
      <ul>
        <!-- list items -->

And so on, with as many drawer elements as we want. Note that in this example, the ‘open’ class has only been applied to the first drawer.

Simple jQuery slide effect

In it’s simplest form, the effect is this when the user clicks on the drawer handle:

1. Hide all the drawer content elements
2. Show the drawer content associated with the current drawer handle

In addition, when the page loads, we should hide all the drawer content, except for our starting point.

This is achieved with the following code:

$(document).ready(function () {
  // hide all ULs inside LI.drawer except the first one
  $('LI.drawer UL:not(:first)').hide(); 
  
  // apply the open class
  $('LI.drawer UL:first').addClass('open');
  
  $('H2.drawer-handle').click(function () {
    // hide the currently visible drawer contents
    $('LI.drawer UL:visible').hide();
    
    // remove the open class from the currently open drawer
    $('H2.open').removeClass('open');
    
    // show the associated drawer content to 'this' (this is the current H2 element)
    // since the drawer content is the next element after the clicked H2, we find
    // it and show it using this:
    $(this).next().show();
    
    // set a class indicating on the H2 that the drawer is open
    $(this).addClass('open');
  });
});

If you wanted to make better using of jQuery’s chaining the code could be written as this:

$(function () { // same as $(document).ready(function () { })
  // assuming we have the open class set on the H2 when the HTML is delivered
  $('LI.drawer H2:not(.open)').next().hide();

  $('H2.drawer-handle').click(function () {
    // find the open drawer, remove the class, move to the UL following it and hide it
    $('H2.open').removeClass('open').next().hide();
    
    // add the open class to this H2, move to the next element (the UL) and show it
    $(this).addClass('open').next().show();
  });
});

If you want it to slide, we can easily swap .hide() for .slideUp() and .show() for .slideDown(), as I have done in the working example of the simple slide demo

If you look at the demo, for me, the annoying aspect is that the height changes depending on which drawer you’ve got open. In particular, if you have the first drawer open, and click on the second, the position of the third drawer handle moves up.

That’s where the accordion plugin helps us.

jQuery accordion plugin

Using the same markup as the previous example, if we take Jörn Zaefferer’s Accordion plugin we can match the effect on Apple’s site.

Before we can use the plugin however, there are a few prerequisites: in particular, you must have the dimensions plugin. The best place to get the latest files is the plugin repository for Accordion. Download the zip file (using the link towards the foot of the page) and grab the following files:

• jquery.accordion.js (or the packed versions)
• lib/jquery.js (if you’ve not got the library already)
• lib/jquery.dimensions.js

Again, using our existing markup, we can use the following code to get the plugin working straight away:

<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery.dimensions.js" type="text/javascript"></script>  
<script src="jquery.accordion.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
  $('UL.drawers').accordion({
    // the drawer handle
    header: 'H2.drawer-handle',
    
    // our selected class
    selectedClass: 'open',
    
    // match the Apple slide out effect
    event: 'mouseover'
  });
});
-->
</script>

That’s it! Simple and very easy to use so long as you have all the right files.

See the plugin version of the slide out effect

You should follow me on Twitter here I tweet about jQuery amongst the usual tweet-splurges!