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

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

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

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

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

トグルボタンと呼ぶ

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

トグルボタンの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;
}

動作確認

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


  • ボタンのラベルを、閉じている状態では○○を表示、
    開いている状態では○○を非表示という表記に自動切替
  • CSS アニメーションを使い、
    表示、非表示をなめらかに。

 

CAUTION

WordPressの投稿で利用する場合は、
ビジュアルエディターの仕様により、
余計なpタグが入ってしまう事があります。

 

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

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