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

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

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でこの症状がでます。
試しに、配布サンプル上で、
4段目「A Vertical Nested Accordion!」をコピーし、
そのまま貼付けて5段目をつくったところ、
4段目は正常で、5段目に同じ症状がありました。
繰り返し、6段、7段とつくりましたが、
ふたつめ以降は全てvertical_accordion_toggleの中身が始めから開いており、開閉できない状態です。
大変恐縮ですが、回避する方法があれば、ご教授願います

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

>入れ子についてさん

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

投稿者:西畑一馬 | 2009年1月 6日 15:56

ありがとうございます。
こちらが参考URLです。
宜しくお願いします。

http://sky.geocities.jp/grape_colette/accordion/index.html

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

>入れ子についてさん

最初のアコーディオンと次にアコーディオンのidが競合しているのが原因じゃないかなと思います。

それぞれのアコーディオンには他のidと重複しないものを設定しなくちゃいけません。

参考になればと

投稿者:西畑一馬 | 2009年1月 6日 22:13

ご回答ありがとうございます。
ほんとうに助かりました。
なんとか思う状態にできそうです。

また、
これをメニューリストとして活用した場合、
ページを移る際、展開の状態がリセットされてしまう点で、今更困っております。
なんとか状態保持したいのですが、フレームで行うしかないのかと
現在なやんでおります。
なにか良い方法がありましたら、ご教授いただければ幸いです。
宜しくお願いします。

投稿者:入れ子について | 2009年1月 9日 14:14

Accordion v2.0についてご質問させていただきます。

onEventをmouseoverにした際に、mouseoutでaccordion_contentを閉じることはできませんでしょうか?

色々試してみてはみましたが、無理でした。
何か良い方法があればと思います。

よろしくお願いいたします。

投稿者:YOU | 2009年2月24日 14:52

>YOUさん

Accordion v2.0ではできません。

投稿者:西畑一馬 | 2009年3月 4日 16:41

テーブルタグの中にアコーディオンコードを入れると動作しません。

投稿者:H2O | 2009年3月30日 23:15
コメントを投稿