アコーディオン形式で内容を表示できる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);

サンプル

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

スポンサードリンク

日時: 2007年11月 6日 12:59
jsライブラリ
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

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

サンプルを拝見し思うように動かすことができました！！！
ありがとうございました。

またわからないことがあれば、コメントいたします。
よろしくお願いします。

投稿者:takuya | 2008年1月28日 20:18

はじめまして。
がんばっていましたが、どうしても手詰まりの状態になってしまいましたので、質問させてください。
二段目以降のaccordion_toggleを開くと、（一段目の中身は問題無し）
vertical_accordion_toggleの中身が始めから開いており、開閉できない状態です。
Macのsafariでは問題ないですが、
Win IEでこの症状がでます。
試しに、配布サンプル上で、
４段目「A Vertical Nested Accordion!」をコピーし、
そのまま貼付けて５段目をつくったところ、
４段目は正常で、５段目に同じ症状がありました。
繰り返し、６段、７段とつくりましたが、
ふたつめ以降は全てvertical_accordion_toggleの中身が始めから開いており、開閉できない状態です。
大変恐縮ですが、回避する方法があれば、ご教授願います

投稿者:入れ子について | 2009年1月 6日 15:02

>入れ子についてさん

ちょっと、どのようなコードかわからないですが、単純な記述ミスだと思います。
よろしかったら正常に動いてないファイルのURLなどを教えていただけたらと思います。

投稿者:西畑一馬

| 2009年1月 6日 15:56