CSSだけでシンプルなトグルボタンを作成しコンテンツを出し入れする方法

jQueryを使ったトグルボタン実装は結構簡単です。

けれど、jQuery(JavaScript)を使うと多少なりとも、ページ読み込みは重くなってしまいます。

なので、「(jQueryを使用するより)少しでもページを軽くしたい」という場合は、CSSとチェックボックスを使ったトグルボタン実装がおすすめです。

こんな感じの動作になります。

 

メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此このシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。結婚式も間近かなのである。

今回、CSSだけでトグルボタンを実装する方法を、主に備忘録目的で出来る限りシンプルにまとめてみました。

ここでいうトグルボタンとは、ボタンを押すとコンテンツが表示し、もう一度押すとコンテンツが非表示になるボタンのことを指すことにします。
スポンサーリンク
レクタングル(大)広告

CSSのみでトグルボタン

以下は、トグルボタンの実装方法です。

トグルボタンのHTML

CSSトグルボタンで必要となるHTMLを出来る限り最小限の機能に絞ったものがこちら。

<div class="toggle-wrap">
  <input type="checkbox" id="toggle-checkbox">
  <label class="toggle-button" for="toggle-checkbox">トグルボタン</label>
  <div class="toggle-content">
    メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此このシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。結婚式も間近かなのである。
  </div>
</div><!-- /.toggle-wrap -->

toggle-contentクラスのHTML要素内に、表示を切り替えたいコンテンツを入力します。

labelのfor属性を、チェックボックスのIDと関連付けることで、連動させます。

チェックボックスにIDを使うので、同じページ内で複数利用する場合は、IDを変更する必要があります。

トグルボタンのCSS

トグルボタンの動作を担当するCSSはこちら。

/************************************
** トグル表示ボタン
************************************/
.toggle-wrap .toggle-button {
  display: block;
  cursor: pointer;
  padding: 3px 10px;
  background-color: #fff;
  border: 1px solid #777;
  text-align: center;
  margin-bottom: 1em;
  border-radius: 3px;
}

.toggle-wrap .toggle-button:hover {
  border-color: red;
}

.toggle-wrap .toggle-content,
.toggle-wrap > input[type="checkbox"] {
  display: none;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
  display: block;
}

少し難しい書き方といえば、以下ぐらいでしょうか。

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
  display: block;
}

input[type=”checkbox”]:checkedというのは、チェックボックスにチェックがついているときのCSSセレクタです。

~ というのは、「後にある要素」という意味です(一応、 > は子要素[直下の要素]という意味です)。

なので前述のコードを直訳すると、「”.toggle-wrap要素”直下のチェックボックスにチェックがついているとき、以降の”.toggle-content要素”を表示する」という意味になります。

動作確認

試しにWordpressの公式テーマTwenty Sixteen上で動作させてみました。

まずは、投稿画面からテキストエディターで以下のようにHTMLを記入します。

WordPressのテキストエディターにトグルボタン用のHTMLを記述

ビジュアルエディターにすると、以下のようにチェックボックスが表示されますが気にしないでください。

WordPressのビジュアルエディターでトグルボタンHTMLを表示

WordPressの投稿で利用する場合はビジュアルエディターの仕様により、余計な改行が入ることがあります。そのせいで、公開ページで表示されるときpタグが入ってしまい正常動作しないことがあります。Wordpress利用する場合は、テーマのテンプレートカスタマイズ等で利用することをおすすめします。

投稿ページを表示すると、こんな感じで表示されます。

トグルボタンの動作

デモ

ボタンキャプションや内容を変更をすれば、様々な使い方で応用できるかと思います。

 

言うにや及ぶ。まだ陽は沈まぬ。最後の死力を尽して、メロスは走った。メロスの頭は、からっぽだ。何一つ考えていない。ただ、わけのわからぬ大きな力にひきずられて走った。陽は、ゆらゆら地平線に没し、まさに最後の一片の残光も、消えようとした時、メロスは疾風の如く刑場に突入した。間に合った。

まとめ

トグルボタンは、jQueryのtoggle()メソッドを利用すれば、かなり簡単に実装できます。

ただ、表示/非表示のみの単純機能(アニメーションなし)であれば、CSSでもそれなりに簡単に実装できます。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク

『CSSだけでシンプルなトグルボタンを作成しコンテンツを出し入れする方法』へのコメント

  1. 名前:さんじー 投稿日:2020/01/12(日) 07:52:11 ID:a99a96cdd

    CSSでトグルボタンを作る方法を探してたので大変参考になりました!
    質問があるのですが、トグルボタンを複数作る場合”toggle-checkbox”の値を”toggle-checkbox01″”toggle-checkbox02″といった形に変えればいいのでしょうか?(ほかに触る部分があれば教えて頂けると嬉しいです。)

  2. アバター画像 名前:わいひら 投稿日:2020/01/13(月) 10:48:45 ID:f6f868afa

    複数作る場合には、以下のidとfor属性の値を同じものにしつつも、他のトグルボックスと違うものにすれば良いかと思います。

    id=”toggle-checkbox”
    for=”toggle-checkbox”

    例えば、2つ目以降設置するなら以下のようにするとかです。

    id=”toggle-checkbox-2″
    for=”toggle-checkbox-2″

  3. 名前:raopi 投稿日:2020/05/05(火) 05:58:57 ID:d6d006fe5

    トグルボタンを画像にしたい場合はどう書けばよろしいでしょうか?

  4. アバター画像 名前:わいひら 投稿日:2020/05/12(火) 12:06:26 ID:72a45ce97

    トグルボタンのクリックする箇所に画像を入れ込めば良いかと思います。