ブログやサイトで、リンクやボタンをクリックすると要素が表示したり非表示したり切り替わる部品を見たことありますよね。
今回はそんなリンクやボタンをクリックすると要素が表示 ↔ 非表示と切り替わる方法をBootstrap 4で簡単に実現する方法を紹介します。
Bootstrap 4を使えばCSSを編集せずにHTMLだけで手軽に要素の表示 ↔ 非表示の切り替えができます。
Bootstrap 4で要素の表示 ↔ 非表示を切り替える方法
表示 ↔ 非表示される部品のサンプル
まずは、どんなものができるのかイメージしてもらうために以下のサンプルを見てください。
クリックすると要素の表示 ↔ 非表示が切り替わります。
aタグを利用する場合とbuttonタグを利用する場合の2つを用意しています。
これを実現するためには以下のHTMLを書けばいいです。
なお、Bootstrap 4の導入は事前に済ませておいてくださいね。
File: bootstrap-collapse.html
-----------------------------
<a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
クリックしてね（aタグ）
</a>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
クリックしてね（buttonタグ)
</button>
<div class="collapse" id="collapseExample">
<div class="border p-3">
表示されました！
</div>
</div>
https://www.marorika.com/entry/setting-bootstrap
HTMLの説明
先程掲載したHTMLの説明をします。
まず全体の構成ですが、大きく分けて2つの部分があります。
- クリック部分（リンクやボタン）
- 表示 ↔ 非表示する部分
クリック部分（リンクやボタン）について
クリック部分にはテキストリンクかボタンを利用します。
設定のポイントは以下になります。
aタグの場合はhref属性で、buttonタグの場合はdata-target属性で表示 ↔ 非表示する要素のidを指定する。aタグでもbuttonタグでもdata-toggle="collapse"を指定する。
表示 ↔ 非表示する部分について
表示 ↔ 非表示する部分についての設定ポイントは以下になります。
- classに
.collapseを付与する. - idをつける
なお、classに.showをつけると要素が表示された状態でページを表示することができます。
アクセシビリティについて
aタグ、buttonタグにはaria-expanded="false"、aria-controls="collapseExample"と属性をしています。
（要素を表示状態からページを表示する場合はaria-expanded属性はaria-expanded="true"とします。）
これらはなくても表示 ↔ 非表示する機能は実現できるのですが、ハンディキャップを持つ人々対してよりアクセシブルにするために記載することが好ましいです。
アクセシビリティについて詳しくない方は以下をご覧になってみてください。
おわりに
Bootstrap 4で要素の表示 ↔ 非表示を切り替える方法について紹介しました。
CSSを編集せずにHTMLだけで実現したい場合にはお手軽なのでぜひお試しください。
なお、Bootstrap 4を使わずにCSSだけで実現したい場合は以下がとても参考になると思います。
サルワカ：HTMLとCSSだけ！要素の表示・非表示を切り替える方法