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>

Follow me!