横に開閉するアコーディオンボックス/コンテンツ表示/SolidStateEveryday

アコーディオンボックスprototype.lite.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<!-- Created By: Toya D. (http://www.nyokiglitter.com/) -->
<!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>horizontal accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
color: #333;
font-size: 11px;
overflow: hidden;
font-family: verdana;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
}
#wrapper{
width: 450px;
margin: 0 auto;
}
.display{
float: left;
width: 25px;
height: 310px;
margin: 0 2px 0 0;
background: #EEA5BB url(images/pinktab.jpg) no-repeat;
}
.stretcher{
float: left;
width: 310px;
}
</style>
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
	var stretchers = document.getElementsByClassName('stretcher');
	var toggles = document.getElementsByClassName('display');
	var myAccordion = new fx.Accordion(
		toggles, stretchers, {opacity: true, height: true, width: true, duration: 400, transition: fx.sineInOut});
	//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]);
}
</script>
</head>
<body>
	<div id="content">
		<h3 class="display" title="one"></h3>
				<div class="stretcher">				
				  <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. Praesent tincidunt, tellus ac faucibus rutrum, purus lorem commodo turpis, volutpat sagittis nunc turpis ac ligula. Etiam pharetra ultricies elit. Maecenas pretium lobortis velit. Sed ligula.</p>
				</div>
			<h3 class="display" title="two"></h3>
				<div class="stretcher">
					<p>Sed elit libero, sagittis nec, ultrices eget, placerat at, arcu. Nam est. In luctus, purus eget porta ornare, felis arcu consectetuer nunc, fringilla facilisis neque sapien eu mi. Maecenas vestibulum aliquet tortor. Maecenas malesuada lacus eu pede. Mauris nonummy pede placerat urna. Cras mollis, lectus eu dapibus ornare, ligula sapien semper eros, sit amet suscipit orci risus non mauris. Praesent porttitor, ligula vitae ultricies congue, metus lorem dictum ligula, et volutpat lorem ligula ac tortor. Morbi varius, est non facilisis mollis, nunc ligula posuere enim, sed elementum lacus nisl a nisl. Quisque rutrum urna quis tortor. Nunc vitae lorem. Proin sapien metus, auctor in, tempus ac, gravida quis, ipsum. Nullam lacus. Cras non leo in magna ullamcorper eleifend. Integer auctor pretium est. Nam eget mi non arcu hendrerit convallis. Nam suscipit dictum lectus.</p>
				</div>
		</div>

			<h3 class="display" title="three"></h3>
				<div class="stretcher">
					<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>
			<h3 class="display" title="four"></h3>
				<div class="stretcher">
					<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>
<script type="text/javascript">
	Element.cleanWhitespace('content');
	init();
</script>
</body>
</html>