jQuery製で柔軟性の高いアコーディオンメニュー「Flexible Accordion」

クリックするとメニューが開くアコーディオンと呼ばれるメニューがあります。
jQueryプラグインのFlexible Accordionは、さまざまなオプションを指定できる柔軟性の高いメニューを作れます。

sponsors

使用方法

Flexible Accordionからflexaccordion.jsをjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="flexaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	jQuery('.oneAccordion').flexAccordion({
		speed: 'fast',
		activeitem: 'none', //初期で開いているメニュー
		showheaders: true, //ヘッダーを表示するかどうか
		headerEl: 'span', //ヘッダーの要素
		contentEl: 'div' //コンテンツの要素
	});
});
</script>
上記のように記述したら、アコーディオン部分を以下のように書きます。

<ul class="oneAccordion">
<li class="accPart">
	<span class="accHeader">タイトル1</span>
	<div class="accContent">
		コンテンツ1
		<input type="button" title="next" value="Next" name="goto 2"/>
		<!-- 上記のnameで飛び先を指定(数値は0から) -->
	</div>
</li>
<li class="accPart">
	<span class="accHeader">タイトル2</span>
	<div class="accContent">
		コンテンツ2
	</div>
</li>
<li class="accPart">
	<span class="accHeader">タイトル3</span>
	<div class="accContent">
		コンテンツ3
	</div>
</li>
</ul>

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net