このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。
デモはこんな感じ。
ここに中身が出現します。
当ブログでは、ソースコードを表示する際に、syntax Highlighter Evolvedを利用していますが、過去の記事では長いソースコードやコマンドの実行結果などを表示していました。
それについては追々これらのボタンを適用するようにしたいと思っています。
で、今回のこのボタンの解説
- 間に<p>タグが自動挿入されても要素の開閉が可能
- ボランのラベルは、閉じている状態では「〇〇を表示」、開いている状態では「〇〇を非表示」という表記に自動切替
- ボタンを中央に配置して、デザインをどんなサイトでも合うように
HTML
<div class="hidden_box">
<input type="checkbox" id="labelX"> <!-- Xを任意の数字に変更 -->
<label for="labelX">ラベル</label> <!-- Xを上記と同じ数字に変更 -->
<div class="hidden_show">
ここに中身
</div>
</div>CSS
.hidden_box {
margin: 10px 0;
padding: 0;
text-align: center;
}
.hidden_box label {
display: inline-block;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
padding: 10px;
min-width: 50%;
background-color: #ffffff;
}
.hidden_box label:hover {
background: #f5f5f5;
}
.hidden_box label::after {
content: "を表示";
}
.hidden_box input {
display: none;
}
.hidden_box .hidden_show {
height: 0;
overflow: hidden;
opacity: 0;
padding: 0;
text-align: left;
transition: 0.3s ease;
}
.hidden_box:has(input:checked) label::after {
content: "を非表示";
}
.hidden_box:has(input:checked) .hidden_show {
height: auto;
opacity: 1;
padding: 10px 0;
}
HTMLは投稿画面のテキストエディタに、CSSはWordPress管理画面の外観⇒テーマの編集⇒style.cssにコピペします。
今回は以上です、お疲れ様でした。
コメント