アコーディオン形式で内容を表示できるAccordion v2.0

配布元:Accordion v2.0[リンク切れ]
ライセンス:MIT License

Accordion v2.0はアコーディオン形式でWebサイトの内容を表示するためのJavaScriptライブラリになります。

最近ではアコーディオン形式を使われているサイトも大分増えてきていますし、Dreamweaver CS3などでも簡単に実装できる為、標準的なUIとして認識されるのはそう遠くはないかもしれません。

設置方法

prototype.jsとscript.aculo.usのeffects.js、そしてaccordion.jsをhead要素内などで読み込みます。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="accordion.js"></script>

以下でします。

<script type="text/javascript">
Event.observe(window, 'load', function(){
	new accordion("accordion");
}, false);
</script>

accordion（特定のID）は任意のidを設定します。

xtmlには特定のID（サンプルではaccordion）で、accordion_toggleを付けた要素とaccordion_contentを付けた要素を囲みます。

<dl id="accordion">
	<dt class="accordion_toggle">タイトル</dt>
	<dd class="accordion_content">本文</dd>
				・
				・
				・
</dl>

CSSは好きにデザインしもらって大丈夫ですが、accordion_contentに対してoverflow:hidden;を設定しないと動きがぎこちなくなります。

これでアコーディオンが動きます。

サンプル

スクリプト実行時に、{onEvent : "mouseover"}を付加することによりマウスオーバーでアコーディオンを開くことも可能です。

Event.observe(window, 'load', function(){
	new accordion("accordion",{onEvent : "mouseover"});
}, false);

サンプル

activateを使い最初から開いている要素を設定することもできます。

Event.observe(window, 'load', function(){
	var acc = new accordion("accordion");
	acc.activate($$("#accordion .accordion_toggle")[0]);
}, false);

サンプル

少ないスペースを有効に利用するのによいスクリプトかもしれませんね。

関連エントリー

ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
ページ内に様々なwindowを表示するControl.Modal
プログラムのコードを配色する「google-code-prettify」
LightBox風にコンテンツを表示するModalbox
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript

スポンサードリンク

«Movable Type で画像挿入をきれいにする「StylelessImage」 | メイン | Movable TypeでSEO対策-metaタグ編-»