HTMLとCSSだけでコンテンツが表示・非表示になるボタン

2018年9月25日

この記事は約 5 分で読めます。

ボタンを押すとコンテンツが表示し、
もう一度押すとコンテンツが非表示になるボタンの
実装方法です。

わたしのリスペクトしている
寝ログさんの紹介している
シンプルなソースを

わたしなりにカスタマイズ
してみました。

1. トグルボタンと呼ぶ
2. トグルボタンのHTML
3. トグルボタンのCSS
- 3.1. まずはオリジナルから
- 3.2. カスタマイズしたもの
4. 動作確認

トグルボタンと呼ぶ

ここでは、
寝ログさんにしたがい
トグルボタンと呼ぶ事にします。

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

JavaScriptを使用しないで、CSSオンリーで動作する「軽量のトグルボタン」の実装方法です。ここでいう ...

https://nelog.jp/css-toggle-button

トグルボタンのHTML

まずは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 -->

labelのfor属性を、
チェックボックスのIDと
関連付けることで連動させます。
チェックボックスにIDを使うので、
同じページ内で複数利用する場合は、
IDを変更する必要があります。

トグルボタンの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 .toggle-button {
display: block;
cursor: pointer;
padding: 3px 10px;
background-color: #fff;
border: 1px solid #ddd;
font-weight: bold;
text-align: center;
margin-bottom: 1em;
border-radius: 8px;
}

.toggle-wrap .toggle-button:hover {
border-color: #999;
background: #f5f5f5;
}

.toggle-wrap .toggle-button:after {
content: "を表示"; /* 閉じている状態のときにラベルの後ろに続く文字 */
}

/*中身を非表示にしておく*/
.toggle-wrap .toggle-content{
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.6s;
}

/*チェックは見えなくする*/
.toggle-wrap > input[type="checkbox"] {
display: none;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-button:after {
content: "を非表示"; /* 開いている状態のときにラベルの後ろに続く文字 */
}

/*クリックで中身表示*/
.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
display: block;
height: auto;
opacity: 1;
padding: 10px 0;
}