jquery　uiで作るアコーディオンメニュー

jquery uiとは、いろいろなプラウザで実行確認されたプラグインをまとめてくれたライブラリで
jquery＋jquery uiを読み込むことで、さらに簡単により動きのあるホームページを実現できます。

そのなかでも、よく使われるアコーディオンメニューを作成してみます。

html

<div id="accordion">
<div>
<h5><a href="#">アコーディオン1</a></h5>
<p>こんにちは、ぼくはアコーディオン1号です。
こんにちは、ぼくはアコーディオン1号です。こんにちは、ぼくはアコーディオン1号です。
</p>
</div>
<div>
<h5><a href="#">アコーディオン2</a></h5>
<p>
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。</p>
</div>
<div>
<h5><a href="#">アコーディオン3</a></h5>
<p>こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。
こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。
こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。</p>
</div>
</div>

スタイルシート(CSS)はこちら

jquery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5.1");</script>
<script type="text/javascript">google.load("jqueryui", "1.8.11");</script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
	header: "h5",
	collapsible:true,
	animated: 'bounceslide' ,
	autoHeight:false,
	active:4
	});
});
</script>

まず1～3行目でjqueryとjquery uiをgoogleから読み込んでいます。

.accordionがuiの関数になります。
あとは、プロパティを指定してあげることでいろいろな表現が可能になります。
プロパティ
headerでは、メニューバーになる要素を選びます。ここでは、h5をメニューバーにしています。
collapsibleは、trueにすると表示しているアコーディオンの文章を、メニューバーのクリックで非表示にできます。初期設定ではfalseです。
animatedでは、追加で別のアニメーションをつけることができます。
今回のboundeslideでは、メニューバーが下に移動するときにメニューバーが落ちたようにバウンドします。
autoHeight、trueではアコーディオン内の文章の高さで一番大きい高さに全て合わせられます。
falseでは枠内のそれぞれの文章の高さにあわせられます。初期設定はtrueです。
activeでは、最初に表示させる文章を選ぶことができます。
この場合1だとアコーディオン1、2だとアコーディオン2、3だとアコーディオン3、それ以上の数字を入れるとメニューが全て閉じた状態になります。

おまけに別プロパティで試して見ます

jquery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5.1");</script>
<script type="text/javascript">google.load("jqueryui", "1.8.11");</script>
<script type="text/javascript">
$(function(){
$("#mouseover").accordion({
	header: "h5",
	autoHeight:true,
	active:1
	event: 'mouseover', 
});
});
</script>

eventを使うことでアコーディオンメニューが実行する形式を指定できます。
mouseoverだと、メニューバーの上にマウスが来たときに実行されます。何も書かなければ、クリックしたときに実行されます。