折りたたみメニューを「Accordion」で実現

Blog等でエントリーが増えてくると、メニューが縦にどんどん伸びてきて嫌なので
こちらのような感じに折り畳めるようにできるAjaxライブラリを探してみました。
探した、というよりmootoolsを使用したサイトだったので、MooToolsでできるかなーと思いまして。
ずばり、「Accordion」がそれでした。
紹介や使い方は、すでにいろんな方が紹介しています。

• http://demos.mootools.net/Accordion
  • 本家Demo。
• Mootools 1.0+ Plugins, Examples, Tutorials & Demos List
  • 「Accordion」参照。
  • 他にも、色々なデモやドキュメントがあり、大変参考になります。
• http://www.bea.hi-ho.ne.jp/mskgc/ajax/mootools.htm
  • 「Accordion」参照。
  • 使い方が5つの手順で分かりやすく紹介されています。サンプルコードも載っています。

一応、にわとり並みの記憶力の自分のために、使い方をあえてメモ。

必要なもの

• MooTools （Accordionに必要なライブラリ全部を含んだもの。Accordionにチェックを入れると自動的に他に必要なライブラリにチェックが入る）

サンプル

JavaScript

<script type="text/javascript">
	// MooTools + Accordion （折りたたみメニュー）
	window.onload = function() {
		var main = $$('.toggler');
		var sub = $$('.element');
		var menuAccordion = new Accordion(
		main, sub, {
			//ここにOptionsを記述
			alwaysHide: true
		}
		);
	}
</script>

HTML

<h2 class="toggler">Main 1</h2>
<ul class="element">
<li>Sub 1</li>
</ul>
<h2 class="toggler">Main 2</h2>
<ul class="element">
<li>Sub 2</li>
<li>Sub 2</li>
</ul>
<h2 class="toggler">Main 3</h2>
<ul class="element">
<li>Sub 3</li>
<li>Sub 3</li>
<li>Sub 3</li>
</ul>

デモ

• http://venzieee.sherbet.info/mootools/Accordion.html

Options

show

integer,ウインドウ読み込み時、あらかじめ開いていて表示される要素を指定（0〜）

display

integer,ウインドウ読み込み時、開いて表示される要素を指定（0〜）

fixedHeight

integer,開いたときの最大の高さ（px）

opacity

boolean,開閉時、要素の表示を透明度の変化でフェードイン/フェードアウトさせるか否か

alwaysHide

boolean,クリックで開いた後、もう一度その要素をクリックして閉じるようにするか否か

duration

integer,開閉スピード（ミリ秒）

他は未調査　っつーかよくわかりません。笑

補足

• JavaScriptはwindow.onloadではなく、htmlコードのbody内で、一番最後に読み込んだりコード記述しても動きます。
• HTMLは、クリックで開閉の動きをさせる要素と、開閉の動きで表示されたり消えたりする要素は、htmlに記述されている順番に1つずつ対になります。（指定の要素を順に配列に入れて同じindex同士を対にする処理をしているのかな）
  対がずれたり、対にならなかった要素があっても動作はしますが、ユーザビリティ的にNGかも。こんな感じです。