【jQuery001】アコーディオンメニュー

まず第1回めはjQueryによるアコーディオンメニューです。
アコーディオンメニューとは、カテゴリーをクリックすると、サブカテゴリーが展開されるタイプのメニューリストです。

HTMLソースは以下のとおりです。
ULタグ内に、H3のメインカテゴリとPの本文があります。

<div id="container">
<ul>
<li>
<h3 class="category_menu"><a href="#">第1章</a></h3>
<p class="sub_menu">Lorem ipsum dolor sit amet, wisi homero laoreet ne mea, populo referrentur eu has, no per fuisset consetetur complectitur. An exerci semper convenire vim, id vis possit salutandi, sea atqui vitae no. Vim quando adolescens adipiscing in. Molestiae mnesarchum mediocritatem mea in, appetere lucilius liberavisse sit ad. Latine reprimique vel no.</p>
</li>
…
</ul>
</div>

以下がJavscriptです。
簡単でしょ？
これはjQueryにすでにスクリプトが用意されているためです。

$(function(){
$("#accordion").accordion({active:false, collapsible:true, autoHeight:true});
});

サンプル画面

 

サンプルファイルは以下からDLしてください。

https://docs.google.com/file/d/0B5VaYvbZPJHcZ0RjY3FxeGhIM2M/edit

タグ：jQuery アコーディオンメニュー