<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Side Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
color: #333;
font-size: 11px;
font-family: verdana;
}
a{
color: #333;
display: block;
font-weight: bold;
text-decoration: none;
}
a:hover{
background: #fff;
}
.tab h3{
color: #333;
padding: 3px;
font-size: 12px;
margin: 0 1px 1px 0;
text-align: center;
background: #6FB9E9;
}
h3{
margin: 0;
padding: 5px;
font-size: 14px;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
}
#wrapper{
width: 600px;
margin: 0 auto;
}
#left{
float: left;
width: 250px;
}
#right{
float: right;
width: 350px;
}
.tab{
color: #333;
padding: 3px;
margin: 0 1px 1px 0;
text-align: center;
background: #6FB9E9;
}
.stretcher{
background: #6FB9E9;
}
</style>
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script type="text/javascript">
//the main function, call to the effect object
function init(){
// var stretchers = document.getElementsByClassName('stretcher'); //div that stretches
// var toggles = document.getElementsByClassName('tab'); //h3s where I click on
var stretchers = document.getElements('div.stretcher');
var toggles = $$('div.tab');
//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.display(div);
found = true;
}
});
// myAccordion.display(found)
if (!found) myAccordion.display(stretchers[0]);
}
</script>
</head>
<body>
<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>Put Your Best Foot First</h3>
<p>This is the content of the very first box. Do you see it? Good!! I know I should say more but I fear that I've run out of things to say. So sorry can you ever forgive me?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. In augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.</p>
</div>
<div class="stretcher">
<h3>Being Second Isn't That Bad</h3>
<p>Hello, I'm the content in the second box. See me? Yea, ok so I don't know what else to say. So bye bye.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu. Praesent vel augue vel dolor ultricies convallis. Nam consectetuer risus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit. Duis quis lacus sed tellus auctor blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget massa in ante vehicula pharetra. Ut massa pede, ornare id, ultrices eget, porta et, metus.</p>
</div>
<div class="stretcher">
<h3>LAST!? Fine...Whatever...I Didn't Want To Be First Anyway.</h3>
<p>I'm the third and final box, but I don't have to be. If you want me just add more its really that simple.</p>
<p>Suspendisse accumsan velit at dui tristique consectetuer. Quisque vitae felis ac arcu dignissim facilisis. Quisque ullamcorper. Cras molestie, elit vel blandit mattis, eros metus tempus tortor, id lobortis sem nunc eget dolor. Nullam dui. Aenean justo. Curabitur ullamcorper, libero eu faucibus ultricies, ipsum arcu interdum tellus, eget tempus augue mauris nec purus. Donec a pede nec tortor venenatis bibendum. Nunc quis erat ac augue rhoncus dictum. Nullam id augue at augue iaculis posuere. Nulla volutpat facilisis quam.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Element.cleanWhitespace('content');
init();
</script>
</body>
</html>