jQuery-UI アコーディオンパネル

jQuery-UI アコーディオンパネル

基本

※WordPressのプラグイン機能により記事内の<h>タグが目次化される

<div id="acc1">
　　<h5>パネル1</h5>
　　<div　id="pannel1">
　　　　<p>1行目</p>
　　</div>
　　<h5>パネル2</h5>
　　<div　id="panne2">
　　　　<p>1行目</p>
　　　　<p>2行目</p>
　　</div>
　　<h5>パネル3</h5>
　　<div id="panne3">
　　　　<p>1行目</p>
　　　　<p>2行目</p>
　　　　<p>3行目</p>
　　</div>
</div>
<script　type="text/javascript">
　　$('#acc1').accordion({
　　　　//初期表示(0から)
　　　　active:　1,
　　　　//ヘッダークリックでメニューを閉じられる
　　　　collapsible:　true,
　　　　icons:　{
　　　　　　'header':　'ui-icon-pin-w',
　　　　　　'activeHeader':　'ui-icon-pin-s'
　　　　},
　　　　heightstyle:　'auto',
　　　　event:　'click'
　　});
</script>

開閉可能なメニュー(パネルを１つのみに)

<div id="acc2">
　　<h5>パネル1(アコーディオン内の<h>タグ)</h5>
　　<div id="panne4">
　　　　<p>1行目</p>
　　</div>
</div>
<script type="text/javascript">
　　$('#acc2').accordion({
　　　　collapsible: true,
　　　　icons: { 'header': 'ui-icon-pin-w', 'activeHeader': 'ui-icon-pin-s' }
　　});
</script>