折りたたみ式は、クリックすると展開するアコーディオン要素です。ユーザーにとってすぐに関連性のないコンテンツを非表示にすることができます。

• filter_drama最初
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。
• place2番目
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。
• whatshot3番目
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

  <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
        

初期化

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.collapsible').collapsible();
  });
        

事前選択されたセクション

事前に開いたセクションを持つ折りたたみ式が必要な場合は、activeクラスをcollapsible-headerに追加します。

• filter_drama最初
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。
• place2番目
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。
• whatshot3番目
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

  <li class="active">
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
  </li>
        

オプション

これらのオプションを使用して、各折りたたみ式の動作をカスタマイズできます。たとえば、折りたたみ式が開いたり閉じたりしたときに実行するカスタム関数を呼び出すことができます。関数は、開いたり閉じたりしたli要素を引数として渡します。

名前	タイプ	デフォルト	説明
accordion	ブール値	true	アコーディオンと折りたたみ式のどちらか。
onOpenStart	関数	null	折りたたみ式が開かれる前に呼び出されるコールバック関数。
onOpenEnd	関数	null	折りたたみ式が開かれた後に呼び出されるコールバック関数。
onCloseStart	関数	null	折りたたみ式が閉じられる前に呼び出されるコールバック関数。
onCloseEnd	関数	null	折りたたみ式が閉じられた後に呼び出されるコールバック関数。
inDuration	数値	300	ミリ秒単位のトランジションイン時間。
outDuration	数値	300	ミリ秒単位のトランジションアウト時間。

メソッド

これらのメソッドを使用して、プログラムで折りたたみ式を開いたり閉じたりできます。2番目のパラメーターは、開く折りたたみ式の0から始まるインデックスです。

jQueryはもはや依存関係ではないため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。

  var instance = M.Collapsible.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.collapsible').collapsible('methodName');
    $('.collapsible').collapsible('methodName', paramName);
  */
        

.open();

折りたたみ式セクションを開きます。

引数

整数: 開くN番目のセクション。

instance.open(3);
      

.close();

折りたたみ式セクションを閉じます。

引数

整数: 閉じるN番目のセクション。

instance.close(3);
      

.destroy();

プラグインインスタンスを破棄して、終了します。

instance.destroy();
      

折りたたみ式のタイプ

折りたたみ式には2つの動作方法があります。複数のセクションを開いたままにしたり、一度に1つのセクションしか開いたままにできないアコーディオンにすることができます。各タイプのデモを以下に示します。