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