折り畳み:collapse

表示と非表示が切り替わるJS:collapse()


a要素によるボタン

表示と非表示が切り替わるコンテンツ

  <p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
  <div class="collapse2">
    表示と非表示が切り替わるコンテンツ
  </div>
  <script>
    $('.toggle-btn').click(function () {
      $('.collapse2').collapse();
    });
  </script>

表示と非表示が切り替わるボタン:collapse('toggle')


a要素によるボタン

表示と非表示が切り替わるコンテンツ

  <p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
  <div class="collapse">
    表示と非表示が切り替わるコンテンツ
  </div>
  <!-- ボタンにイベントを設定して、切り替えるclassを指定して、toggleで切り替わる -->
  <script>
    $('.toggle-btn').click(function () {
      $('.collapse').collapse('toggle');
    });
  </script>

複数の要素の表示と非表示とを切り替:data-target


ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」

  <!-- 切替ボタン、data-targetで切り替え先を指定する -->
  <p>
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-01"
      aria-expanded="false" aria-controls="content-01">ID「content-01」</button>
    <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-02"
      aria-expanded="false" aria-controls="content-02">ID「content-02」</button>
  </p>
  <!-- 切り替え先は、IDで指定する「content-01」、クラス「contents」 -->
  <div class="row">
    <div class="col">
      <div class="collapse contents" id="content-01">
        <div class="card card-body">
          ID「content-01」、クラス「contents」
        </div>
      </div>
    </div>
    <div class="col">
      <div class="collapse contents" id="content-02">
        <div class="card card-body">
          ID「content-02」、クラス「contents」
        </div>
      </div>
    </div>
  </div>

アコーディオン折り畳み:collapse


a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ

  <div class="row">
    <div class="col-sm-6 mb-4">
      <!-- a要素とhref属性による切替ボタン -->
      <p>
        <a data-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
          a要素とhref属性によるボタン<br>
          罫線なし、色なしでやれば、リンクではなく、その下にコンテンツを出せる
        </a>
      </p>
      <div class="collapse" id="collapseContent01">
        <div class="card card-body">
          a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
        </div>
      </div>
    </div>
  </div>