クリックで要素の表示と非表示を切り替えるHTML+CSS

このページでは、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 {
	border: 1px solid 
#ddd;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	margin: 0 auto;
	padding: 10px;
	min-width: 50%;
}

.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.5s;
}

.hidden_box input:checked ~ label:after {
	content: "を非表示";	/* 開いている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input:checked ~ .hidden_show {
	height: auto;
	opacity: 1;
	padding: 10px 0;
}

HTMLは投稿画面のテキストエディタに、CSSはWordPress管理画面の外観⇒テーマの編集⇒style.cssにコピペします。

今回は以上です、お疲れ様でした。