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 -->
チェックボックスの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 アニメーションを使い、
表示、非表示をなめらかに。
WordPressの投稿で利用する場合は、
ビジュアルエディターの仕様により、
余計なpタグが入ってしまう事があります。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません