アコーディオン / 折りたたみ

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

一般的なアコーディオンのレイアウトは以下のように扱われます。

<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 - 1つのアコーディオンアイテム。必須
  - accordion-item-toggle - アコーディオンアイテムのコンテンツを展開/折りたたむためのリンクです。必要です。
  - accordion-item-content - 隠されたアコーディオンアイテムのコンテンツです。必須
- accordion-item-opened - 1つだけ開かれたアコーディオンアイテムです。

折りたたみ可能なレイアウト

もし、単一の独立した折りたたみ可能な要素を使用したい場合は、"accordion-list "ラッパー要素を省略することができます。

<!-- 単一の折り畳み可能な要素 -->
<div class="accordion-item">
    <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>

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

リストビューをアコーディオンとして使用する場合は、"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 クラスを追加する必要があります。

<!-- アコーディオンの反対側 -->
<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>

<!-- アコーディオンリストの反対側 -->
<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>

Example

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Accordion</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block-title">List View Accordion</div>
      <div class="list accordion-list">
        <ul>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 1</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 2</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div><!-- Separate collapsibles - omit "accordion-list" class-->
      <div class="block-title">Separate Collapsibles</div>
      <div class="list">
        <ul>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 1</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 2</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Opposite Side</div>
      <div class="list accordion-list accordion-opposite">
        <ul>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 1</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 2</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Custom Accordion</div>
      <div class="block accordion-list custom-accordion">
        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span>Item 1</span>
          </div>
          <div class="accordion-item-content">
            <p>Item 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span>Item 2</span>
          </div>
          <div class="accordion-item-content">
            <p>Item 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
          </div>
        </div>
        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span>Item 3</span>
          </div>
          <div class="accordion-item-content">
            <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<style>
  .custom-accordion {
    padding-left: 0;
    padding-right: 0;
  }

  .custom-accordion .accordion-item-toggle {
    padding: 0px 15px;
    height: 44px;
    line-height: 44px;
    font-size: 17px;
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .custom-accordion .accordion-item-toggle:active {
    background: rgba(0, 0, 0, 0.15);
  }

  .custom-accordion .accordion-item-toggle span {
    display: inline-block;
    margin-left: 15px;
  }

  .custom-accordion .accordion-item:last-child .accordion-item-toggle {
    border-bottom: none;
  }

  .custom-accordion .icon-plus,
  .custom-accordion .icon-minus {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #000;
    border-radius: 100%;
    line-height: 20px;
    text-align: center;
  }

  .custom-accordion .icon-minus {
    display: none;
  }

  .custom-accordion .accordion-item-opened .icon-minus {
    display: inline-block;
  }

  .custom-accordion .accordion-item-opened .icon-plus {
    display: none;
  }

  .custom-accordion .accordion-item-content {
    padding: 0px 15px;
  }
</style>

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

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

app.accordion.open(item) - open specified accordion item

item - アコーディオンアイテム要素（<div class="accordion-item">）のHTMLElementまたはstring（CSSセレクタ付き）。必須

app.accordion.close(item) - close specified accordion item

item - HTMLElementまたはstring（CSSセレクタ付き）のアコーディオン-アイテム要素（<div class="acidion-item">）。必須

app.accordion.toggle(item) - toggle specified accordion item

item - HTMLElementまたはstring（CSSセレクタ付き）のアコーディオン-アイテム要素（<div class="acidion-item">）。必須

アコーディオンのイベント

アコーディオンでは、アコーディオンアイテムに対して以下のDOMイベントが、アプリインスタンスに対してアプリイベントが発生します。

DOMイベント

Event	Target	Description
accordion:beforeopen	Accordion item<div class="accordion-item">	イベントは、アコーディオンのコンテンツが開くアニメーションを開始する直前に発生します。event.detail.prevent`には、呼ばれたときにアコーディオンが開かないようにする関数が含まれています。
accordion:open	Accordion item<div class="accordion-item">	イベントは、アコーディオンコンテンツが開くアニメーションを開始するときに発生します。
accordion:opened	Accordion item<div class="accordion-item">	イベントは、アコーディオンコンテンツのオープニングアニメーションが完了した後に発生します。
accordion:beforeclose	Accordion item<div class="accordion-item">	イベントは、アコーディオンコンテンツが閉じるアニメーションを開始する直前に発生します。`event.detail.prevent` には、呼ばれたときにアコーディオンが閉じないようにするための関数が含まれます。
accordion:close	Accordion item<div class="accordion-item">	イベントは、アコーディオンコンテンツが閉じるアニメーションを開始するときに発生します。
accordion:closed	Accordion item<div class="accordion-item">	イベントは、アコーディオンコンテンツが閉じるアニメーションを完了した後に発生します。

アプリのイベント

Event	Arguments	Description
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);
});