アコーディオンメニュー表示手順

1. jQuery UIのダウンロードページにアクセスします。
   ⇒http://jqueryui.com/download/
2. デフォルトでは「Toggle All」にチェックが付いているので、チェックを外してタブ表示に必要な「Accordion」をチェックして「Download」ボタンを押下します。（「Accordion」をチェックすると「Core」と「Widget」も同時にチェックされます。）
   ※デザインを変更したい場合はページ下にある「Theme」でタブのデザインも選択可能です。今回は「UI lightness」を選択しています。
   
   
3. ダウンロードしたファイルの内、アコーディオン表示に必要となるのは以下のファイルとなります。
   

   分類	ファイル名　or フォルダ名	パス	備考
   js	jquery-1.8.3.js	\jquery-ui-1.9.2.custom\js	jQuery本体
   js	jquery-ui-1.9.2.custom.min.js	jquery-ui-1.10.2.custom\jquery-ui-1.10.2.custom\development-bundle\ui\minified
   css	jquery-ui-1.9.2.custom.min.css	\jquery-ui-1.9.2.custom\css\custom-theme	jQuery UI用のスタイルシート
   画像	custom-theme ※選択したテーマによりフォルダ名は変わります	\jquery-ui-1.9.2.custom\css\custom-theme\images

4. HTMLファイル
   
   XHTML

   <div id="accordionDemo"> <h3>メニュー1</h3> <div>メニュー1の表示内容を記述します。</div> <h3>メニュー2</h3> <div>メニュー2の表示内容を記述します。</div> <h3>メニュー3</h3> <div>メニュー3の表示内容を記述します。</div> </div>

   1 2 3 4 5 6 7 8

   <div id="accordionDemo">   <h3>メニュー1</h3>   <div>メニュー1の表示内容を記述します。</div>   <h3>メニュー2</h3>   <div>メニュー2の表示内容を記述します。</div>   <h3>メニュー3</h3>   <div>メニュー3の表示内容を記述します。</div> </div>

5. jQueryファイル
   jQueryはaccordionメソッドを実行するだけで終了です。
   
   jQuery(function($) { jQuery('#accordionDemo').accordion(); });

   1 2 3

   jQuery(function($) { jQuery('#accordionDemo').accordion(); });

実行サンプル：デザイン「UI lightness」

jQuery UI「アコーディオンメニュー」のプロパティ