CSSのみでクリックごとにプルダウン&アップ！中身を開閉するボタン

サイトをスマホ対応させる時、スマホでは標準で表示したくない&させない方がいい画像やテキストがあるよね。
情報表示量が比較的限られてしまうスマホに、PCと同じ量の情報を表示するなんて土台無理！

ユーザビリティを上げる為にはその為の対策がどうしても必要なのは間違いない！

ってことで、CSSのみで、画像やテキストを隠したり表示したりするボタンを作る方法を調査したのでシェア♪

以下のデモのようにクリックやタップで、中身がON・OFFできるように「プルダウン&アップ」するようにする。

デモ

CSSとHTMLサンプル

CSS

.box label{
	background: #5f9;
	display: block;
	padding: 10px;
	margin-bottom: 5px;
	cursor: pointer;
}

.box input[type="checkbox"].on-off,
.box input[type="checkbox"].on-off +div{
	display: none;
}

.box input[type="checkbox"].on-off:checked +div{
	display: block;
}

.box div{
	margin: 0 0 20px;
}

HTML

<div class="box">
	<label for="inbox1">ボタン1</label>
	<input type="checkbox" id="inbox1" class="on-off">
	<div>
		どべりばー！<br>げろりんぱーーーーーー！
	</div>

	<label for="inbox2">ボタン2</label>
	<input type="checkbox" id="inbox2" class="on-off" checked>
	<div>
		<ul>
			<li>砂糖</li>
			<li>塩</li>
			<li>酢</li>
			<li>醤油</li>
			<li>味噌</li>
		</ul>
	</div>

	<label for="inbox3">ボタン3</label>
	<input type="checkbox" id="inbox3" class="on-off">
	<div>
		<p>砂糖砂糖砂糖ーー！<br>塩塩塩ーーー！！<br>うまうまーーーーーー！！！</p>
	</div>
</div>

説明

class「box」内が対象。
labelのforと、inputのidは共通で"inbox○"という形になる。
○の中は手動で書き換える。
inputに"checked"を加えるとデフォルトで開いた状態になる。