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

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

基本

パネル1(アコーディオン内の<h>タグ)

1行目

パネル2(アコーディオン内の<h>タグ)

1行目

2行目

パネル3(アコーディオン内の<h>タグ)

1行目

2行目

3行目



※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>

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

パネル1(アコーディオン内の<h>タグ)

1行目



<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>