コラップス collapseの使い方 | BootStrap 3.3.7 のJavascript

2019年9月1日

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。

ここでは、Bootstrap3.3.7に搭載されている「コラップス(collapse)」の使い方をご紹介します。

よくある質問とかで質問(Question)をクリックしたら回答(Answer)が見えるシーンとかで使えそうですね。

関連 Bootstrap4版でのコラップスの使い方について

Bootstrap4版でのコラップスの使い方は「Bootstrap4 Collapse(コラップス)の使い方・コンテンツを開閉するやり方を徹底解説」をご覧ください。

Bootstrap4 Collapse(コラップス)の使い方・コンテンツを開閉するやり方を徹底解説

合わせて読みたい記事

BootStrapの基本・環境設定から実施したい方はこちらの記事をご覧ください。

Bootstrapの使い方導入方法と基本・レスポンシブデザインを徹底解説

コラップス(collapse)とは

コラップス(collapse)は、コンテンツを開閉できるJavaScriptです。スマートフォンのハンバーガーメニューや、よくある質問などで利用することができます。

■表示例

コラップス(collapse)のソースコード・作り方

表示例のソースコードは下記の通りです。

■ソースコード

<a data-toggle="collapse" href="#answer1">
	Q.他のスクールとの違いはなんですか？？
</a>
<div class="collapse" id="answer1">
	WEBST8は個人事業主・経営者さまに特化した大阪のWebスクールです。
  <br>
  ビジネスの目的を達成するための技術を学ぶというコンセプトが他のスクールとの大きな違いです。
</div>

Q.他のスクールとの違いはなんですか？？

</a>

WEBST8は個人事業主・経営者さまに特化した大阪のWebスクールです。

<br>

ビジネスの目的を達成するための技術を学ぶというコンセプトが他のスクールとの大きな違いです。

</div>

コラップス(collapse)の解説

ここでは、ソースコードの簡単な解説を行います。

クリックして開閉させる側の要素にdata-toggle="collapse"を指定、a要素の場合はページ内リンクでid名を指定する。
開閉される側のコンテンツには、id名とclass="collapse"を指定する

a要素ではなく、ボタン要素の場合は、hrefの代わりに、data-target="#開閉される側のID名"を指定します。

■表示例

■上記のソースコード

<button data-toggle="collapse" type="button" data-target="#answer2" class="btn btn-default" >Q.他のスクールとの違いはなんですか？？</button>
<div class="collapse" id="answer2">
	WEBST8は個人事業主・経営者さまに特化した大阪のWebスクールです。
  <br>
  ビジネスの目的を達成するための技術を学ぶというコンセプトが他のスクールとの大きな違いです。
</div>

<button data-toggle="collapse" type="button" data-target="#answer2" class="btn btn-default" >Q.他のスクールとの違いはなんですか？？</button>

WEBST8は個人事業主・経営者さまに特化した大阪のWebスクールです。

<br>

ビジネスの目的を達成するための技術を学ぶというコンセプトが他のスクールとの大きな違いです。

</div>

■使い方の詳細は下記の公式ドキュメントをご参照ください。
collapse | Javascript - Bootstrap 3.3

合わせて読みたい記事

Bootstrapのナビゲーションのハンバーガーメニューの開閉でも利用されています。

■ハンバーガーメニューで開閉する例

■ブートストラップのナビゲーションの例

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navi" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse" id="bs-navi">
        <ul class="nav navbar-nav">
          <li><a href="#">ホーム</a></li>
          <li><a href="#">会社情報</a></li>
          <li><a href="#">お客様の声</a></li>
          <li><a href="#">ブログ</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
  </nav>