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

【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！

配布元: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);

サンプル

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

スポンサードリンク

日時: 2007年11月 6日 12:59
javascript

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

このエントリーのトラックバックURL: http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/103

コメント

Accordion v2.0は、v1.0に比べ、accordion_toggleに指定した要素をクリックすると、開いている要素が閉じる機能が新たに加えられたようです。
しかし、これ、eventがclickの時はいいのですが、mouseoverの時はちょっと具合が悪い（clickでリンクさせたいので内容は開いたままにしておきたい）。
mouseoverしても閉じないようにするには、accordion.jsのどこをどう直したらいいかわかりますか？

投稿者:nori | 2007年12月 7日 13:17

上記の件、Deactivate an active accordion とコメントされている部分をまるまるカットすることで、一応、解決しました。強引なやり方だとは思うのですが。

投稿者:nori | 2007年12月11日 09:13

Accordion v2.0についてご相談です。
accordion_toggleをクリックした際、他のaccordion_contentを閉じないようにするにはどうしたらよいでしょうか？
Javascript初心者のため、全くわかりません。
よろしくお願いします。

投稿者:takuya | 2008年1月23日 19:33

＞takuyaさん

Accordion v2.0ではおそらく出来ません。(その形ですとアコーディオンというUIじゃないですしね)

コラプシブルパネルを複数組み合わせることによりお望みの動作になると思います。

http://blog.webcreativepark.net/2007/12/03-000000.html

参考まで

投稿者:西畑一馬 | 2008年1月27日 05:22

コメントありがとうございます！
コラプシブルパネルというんですね。
勉強になりました。