Making accordions with tabs

The accordion effect is in many ways similar to tabs. The only difference is the way in which panes are shown and hidden. The tabs tool contains a built-in effect called slide for making accordions. Here is an example:

First pane

Lorem ipsum dolor

Fusce semper, nisi nec pellentesque sollicitudin.

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. Nulla id massa nec erat laoreet elementum. Vivamus tristique auctor odio. Integer mi neque.

Second pane

Vestibulum ante ipsum

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. Praesent pretium tristique est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis quis, pede. Aliquam erat volutpat. Donec sit amet urna quis nisi elementum fermentum.

Third pane

Curabitur vel dolor

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna, non vulputate libero justo nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.

standalone demo

It's important to realize that jquery.tabs is a single file weighing around 2KB and it can create both tabs and accordions in a professional manner.

HTML coding

Our HTML layout is a bit different than in tabs. The accordion headers are positioned in front of the panes and everything is contained as a flat list inside a single root DIV element with an id of "accordion". We make the first tab visible "manually" on the HTML by setting the display:block property for the fist tab. We won't let the tabs do this automatically because we don't want to perform a slide effect when the page loads.

<div id="accordion">
  <h2 class="current">First pane</h2>
  <div class="pane" style="display:block">... pane content ...</div>
 
  <h2>Second pane</h2>
  <div class="pane">... pane content ...</div>
 
  <h2>Third pane</h2>
  <div class="pane">... pane content ...</div>
</div>

HTML

The styling is defined in a single documented CSS file: tabs-accordion.css.

JavaScript coding

This time we have no root element for our tabs so we have to explicitly tell the tool which elements work as tabs. This is specified in the tabs configuration option. The sliding effect suitable for accordions is supplied with the effect attribute. We unset the initialIndex property so that the first tab is not automatically opened when the page loads.

  $("#accordion").tabs(
    "#accordion div.pane",
    {tabs: 'h2', effect: 'slide', initialIndex: null}
  );

JavaScript