Simple Accordion Effect

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:

HTML

<div id="accordion" style="text-align:left;">

 <h2 class="current">First</h2>
  <div class="pane" style="display:block">
  <img src="images/javascript.png" alt="JavaScript tools" style="float:left; margin:0 15px 15px 0" />
  <h4>Lorem ipsum dolor</h4>
  <p><strong>Fusce semper, nisi nec pellentesque sollicitudin.</strong></p>
  <p style="clear:both">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.</p>
  </div>
  
  
  <h2>Second</h2>
  <div class="pane">
  <h4>Vestibulum ante ipsum</h4>
  <p>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.</p>
  </div>
  

 <h2>Third</h2>
  <div class="pane">
  <h4>Curabitur vel dolor</h4>
  <p>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.</p>
  </div> 

</div> 

CSS

#accordion {
 background:#333 url(../images/h300.png) 0 0;
 width: 300px;
 border:1px solid #333; 
 -background:#666;
}

#accordion h2 {
 background:#ccc url(../images/h30.png);
 margin:0;
 padding:5px 15px;
 font-size:14px;
 font-weight:normal;
 border:1px solid #fff;
 border-bottom:1px solid #ddd;
 cursor:pointer;  
}

#accordion h2.current {
 cursor:default;
 background-color:#fff;
}

#accordion .pane {
 border:1px solid #fff;
 border-width:0 2px;
 display:none;
 height:180px;
 padding:15px;
 color:#fff;
 font-size:12px;
}

#accordion .pane h3 {
 font-weight:normal;
 margin:0 0 -5px 0;
 font-size:16px;
 color:#999;
}

JavaScript

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

jquery.tools.min.js

Click to Download

Example

Click to DEMO