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を記入します。

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

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

デモ

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

まとめ

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

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