jQueryUIでアコーディオンを表示する

jQueryUIでアコーディオンを表示する
1. 関連

jQueryUIでアコーディオンを表示する

jQueryUIでアコーディオンを表示します。

まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。

<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<link type="text/css" href="../css/jquery-ui.css" rel="stylesheet" />

アコーディオンにはいろいろなオプションがあります。

active	数値（0,1,2…の順で指定、0が一番上）
collapsible	true or false
event	create,beforeActivate,activate
header	見出し要素を指定

header:”h5″というように見出し要素をダブルクォーテーションで囲んで指定します。

activeは未指定の場合、デフォルト0ですが1を指定すると上から2番目のアコーディオンが開いた状態になります。

collapsibleはデフォルトfalseですが、trueにするとアコーディオンを全て閉じることができ、falseだとどれか一つのアコーディオンは開いている状態になります。

<body>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    header:"h5",
    active:1,
    collapsible:true,
    activate: function(event, ui) {
      console.log(ui.newPanel.context.id);
    }
  });
});
</script>
 
<!-- アコーディオン -->
<div id="accordion">
<h5>見出し1</h5>
<p>
見出し1の内容～<br/>
見出し1の内容～<br/>
</p>
<h5>見出し2</h5>
<p>
見出し2の内容～<br/>
見出し2の内容～<br/>
</p>
<h5>見出し3</h5>
<p>
見出し3の内容～<br/>
見出し3の内容～<br/>
</p>
</div>
</body>

イベントは1.10で名前が変わり、change→activate,changestart→beforeActivateになっています。

changeなどではエラーにはなりませんが、動作しなくなりました。

DEMO

jquery.uiの詳細はこちらをどうぞ。