アコーディオン / コラプシブル

アコーディオンレイアウト

一般的なアコーディオンレイアウトは、以下のように扱うことができます。

<div class="accordion-list">
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item accordion-item-opened">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  ...
</div>

説明:

accordion-list - アコーディオン項目のリストセット。オプションのクラス
- accordion-item - 単一のアコーディオン項目。必須
  - accordion-item-toggle - アコーディオン項目のコンテンツを展開/折りたたむためのリンク。必須
  - accordion-item-content - 非表示のアコーディオン項目のコンテンツ。必須
- accordion-item-opened - 開いている単一のアコーディオン項目

コラプシブルレイアウト

単一の独立したコラプシブル要素を使用する場合は、"accordion-list"ラッパー要素を省略できます。

<!-- Single collapsible element -->
<div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
</div>

<!-- Another separate collapsible element -->
<div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
</div>

アコーディオンリストビュー

リストビューをアコーディオンとして使用する場合は、"accordion-toggle"の代わりに"item-link"要素を使用できます。

<div class="list accordion-list">
    <ul>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 1</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 1 content ...</div>
        </li>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 2</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 2 content ...</div>
        </li>
    </ul>
</div>

反対のアコーディオン

アコーディオンのシェブロンアイコンを反対側（LTRでは左側）にレンダリングするには、アコーディオンコンテナまたはアコーディオンリストにaccordion-oppositeクラスを追加する必要があります。

<!-- Accordion opposite -->
<div class="accordion-list accordion-opposite">
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item accordion-item-opened">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  ...
</div>

<!-- Accordion list opposite -->
<div class="list accordion-list accordion-opposite">
  <ul>
    <li class="accordion-item">
      <a href="" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </a>
      <div class="accordion-item-content">Item 1 content ...</div>
    </li>
    <li class="accordion-item">
      <a href="" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </a>
      <div class="accordion-item-content">Item 2 content ...</div>
    </li>
  </ul>
</div>

例

accordion.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Accordion</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">List View Accordion</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Opposite Side</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-opposite accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>

アコーディオンアプリのメソッド

アコーディオンには、プログラムで開閉できるJavaScript APIもあります。いくつかのアコーディオンアプリのメソッドを見てみましょう。

app.accordion.open(item) - 指定されたアコーディオン項目を開きます。

item - アコーディオン項目の要素（<div class="accordion-item">）のHTMLElementまたはstring（CSSセレクターを使用）。必須

app.accordion.close(item) - 指定されたアコーディオン項目を閉じます。

item - アコーディオン項目の要素（<div class="accordion-item">）のHTMLElementまたはstring（CSSセレクターを使用）。必須

app.accordion.toggle(item) - 指定されたアコーディオン項目の開閉を切り替えます。

item - アコーディオン項目の要素（<div class="accordion-item">）のHTMLElementまたはstring（CSSセレクターを使用）。必須

アコーディオンイベント

アコーディオンは、アコーディオン項目で次のDOMイベントを発行し、アプリインスタンスでアプリイベントを発行します。

DOMイベント

イベント	ターゲット	説明
accordion:beforeopen	アコーディオン項目<div class="accordion-item">	アコーディオンコンテンツが開くアニメーションを開始する直前にイベントがトリガーされます。`event.detail.prevent`には、呼び出すとアコーディオンが開くのを防ぐ関数が含まれています。
accordion:open	アコーディオン項目<div class="accordion-item">	アコーディオンコンテンツが開くアニメーションを開始するときにイベントがトリガーされます。
accordion:opened	アコーディオン項目<div class="accordion-item">	アコーディオンコンテンツが開くアニメーションを完了した後にイベントがトリガーされます。
accordion:beforeclose	アコーディオン項目<div class="accordion-item">	アコーディオンコンテンツが閉じるアニメーションを開始する直前にイベントがトリガーされます。`event.detail.prevent`には、呼び出すとアコーディオンが閉じるのを防ぐ関数が含まれています。
accordion:close	アコーディオン項目<div class="accordion-item">	アコーディオンコンテンツが閉じるアニメーションを開始するときにイベントがトリガーされます。
accordion:closed	アコーディオン項目<div class="accordion-item">	アコーディオンコンテンツが閉じるアニメーションを完了した後にイベントがトリガーされます。

アプリイベント

イベント	引数	説明
accordionBeforeOpen	(el, prevent)	アコーディオンコンテンツが開くアニメーションを開始する直前にイベントがトリガーされます。`prevent`には、呼び出すとアコーディオンが開くのを防ぐ関数が含まれています。
accordionOpen	(el)	アコーディオンコンテンツが開くアニメーションを開始するときにイベントがトリガーされます。
accordionOpened	(el)	アコーディオンコンテンツが開くアニメーションを完了した後にイベントがトリガーされます。
accordionBeforeClose	(el, prevent)	アコーディオンコンテンツが閉じるアニメーションを開始する直前にイベントがトリガーされます。`prevent`には、呼び出すとアコーディオンが閉じるのを防ぐ関数が含まれています。
accordionClose	(el)	アコーディオンコンテンツが閉じるアニメーションを開始するときにイベントがトリガーされます。
accordionClosed	(el)	アコーディオンコンテンツが閉じるアニメーションを完了した後にイベントがトリガーされます。

var app = new Framework7();

var $ = Dom7;

$('.accordion-item').on('accordion:opened', function () {
  app.dialog.alert('Accordion item opened');
});

$('.accordion-item').on('accordion:closed', function (e) {
  app.dialog.alert('Accordion item closed');
});

app.on('accordionOpened', function (el) {
  console.log('The following element opened:');
  console.log(el);
});

このドキュメントを改善する

このページで

アコーディオンレイアウト
コラプシブルレイアウト
アコーディオンリストビュー
反対のアコーディオン
例
アコーディオンアプリのメソッド
アコーディオンイベント

DOMイベント
アプリイベント