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>

The styling is defined in a single documented CSS file:tabs-acc.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});