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

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

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

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

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

 

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

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

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

CSSのみでトグルボタン

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

トグルボタンのHTML

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

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

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

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

トグルボタンのCSS

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

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

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

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

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

動作確認

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

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

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

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

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

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

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

トグルボタンの動作

デモ

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

 

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

まとめ

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

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