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

Customizing the Accordion Effect

This demo shows how you can add custom effects to tabs. Here you can see a slight background color change when the sliding effect occurs:

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;
}

Accordion - JavaScript

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

Tab - JavaScript

$.tools.tabs.addEffect("slide", function(i, done) {
 this.getPanes().slideUp().css({backgroundColor: "#ff9833"});
 this.getPanes().eq(i).slideDown(function()  {
  $(this).css({backgroundColor: 'transparent'});
  done.call();
 });
});

jquery.tools.min.js

Click to Download

Example

Click to DEMO

Bullet List Accordion Menu Example

Glossy Accordion Menu Example

Urban Gray Accordion Menu Example

Side Accordion using Moo.Fx

HTML

<div id="wrapper">
 
 <div id="left">
  <div class="tab">
  <h3 title="first"><a href="javascript:;">first</a></h3>
  </div>
  <div class="tab">
  <h3 title="second"><a href="javascript:;">second</a></h3>
  </div>
  <div class="tab">
  <h3 title="third"><a href="javascript:;">third</a></h3>
  </div>
  <br />
 </div>
 
 <div id="right">
 <div id="content">
 <div class="stretcher">
  <h3>The standard Lorem Ipsum passage</h3>
 <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
 </div>
 
 <div class="stretcher">
 <h3>1914 translation by H. Rackham</h3>
 <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
 </div>
 
 <div class="stretcher">
 <h3>written by Cicero in 45 BC</h3>
 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
 </div>
 </div>
 </div>
</div>

CSS

.tab h3{ color: #333; padding: 3px; margin: 0 1px 1px 0; text-align: center; background: #A9D74E; text-transform:uppercase; color:#FFFFFF; }

h3{ margin: 0; padding: 10px; color:#FFFFFF; font-weight:normal; } 

p{ margin: 0; padding: 10px; line-height: 1.5em; }

#wrapper{ width: 600px; } 

#left{ float: left; width: 150px; }

#right{ float: right; width: 450px; }

.tab{ color: #333; padding: 3px; margin: 0 1px 1px 0; text-align: center; background:#A9D74E;  }

.stretcher{ background: #6FB9E9; }

Moo.fx JavaScript

function init(){
  
  var stretchers = document.getElementsByClassName('stretcher'); //div that stretches
  var toggles = document.getElementsByClassName('tab'); //h3s where I click on

  //accordion effect
  var myAccordion = new fx.Accordion(
   toggles, stretchers, {opacity: true, height: true, duration: 400}
  );

  //hash functions
  var found = false;
  toggles.each(function(h3, i){
   var div = Element.find(h3, 'nextSibling'); //element.find is located in prototype.lite
   if (window.location.href.indexOf(h3.title) > 0) {
    myAccordion.showThisHideOpen(div);
    found = true;
   }
  });
  if (!found) myAccordion.showThisHideOpen(stretchers[0]);
 }

JavaScript

Element.cleanWhitespace('content');
  init();

prototype.lite.js

Click to Download

moo.fx.js

Click to Download

moo.fx.pack.js

Click to Download

Example

Click to DEMO

Tabbed Accordion using Moo.Fx

HTML

<div id="wrapper">
 <div id="content">
 <h3 class="tab" title="first"><div class="tabtxt"><a href="#">First</a></div></h3>
 <div class="tab"><h3 class="tabtxt" title="second"><a href="#">Second</a></h3></div>
 <div class="tab"><h3 class="tabtxt" title="third"><a href="#">Third</a></h3></div>
 <div class="tab"><h3 class="tabtxt" title="fourth"><a href="#">Fourth</a></h3></div>
 <div class="boxholder">
  <div class="box">
   <p><strong>The First Box</strong></p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
  <div class="box">
   <p><strong>The Second Box</strong></p>
   <p>popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="box">
   <p><strong>The Third Box</strong></p>
   <p>ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000</p>
  </div>
  <div class="box">
   <p><strong>The Fourth Box</strong></p>
   <p>The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum</p>
  </div>
 </div>
</div>
</div>

CSS

p{ margin: 0; padding: 5px; line-height: 1.5em; text-align: justify; border: 1px solid #73A405; }

#wrapper{ width: 500px;} 

.box{ background: #fff; } 

.boxholder{ clear: both; padding: 5px; background: #8DC70A; }
 
.tab{ float: left; height: 32px; width: 102px; margin: 0 1px 0 0; text-align: center; background: #8DC70A url(../images/greentab.jpg) no-repeat; }

.tab h3 { padding: 9px 0 0; color:#FFFFFF !important; }

.tabtxt{ margin: 0; font-weight: bold; padding: 9px 0 0 0; color:#FFFFFF !important; } 

Moo.fx JavaScript

function init(){
 var stretchers = document.getElementsByClassName('box');
 var toggles = document.getElementsByClassName('tab');
 var myAccordion = new fx.Accordion(
  toggles, stretchers, {opacity: false, height: true, duration: 600}
 );
 //hash functions
 var found = false;
 toggles.each(function(h3, i){
  var div = Element.find(h3, 'nextSibling');
   if (window.location.href.indexOf(h3.title) > 0) {
    myAccordion.showThisHideOpen(div);
    found = true;
   }
  });
  if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}

JavaScript

Element.cleanWhitespace('content');
 init();

prototype.lite.js

Click to Download

moo.fx.js

Click to Download

moo.fx.pack.js

Click to Download

Example

Click to DEMO