CSSでコンテンツを表示・非表示を切替_ブログ_zanmai.net

昔はJavascriptやJqueryなどを使ってコンテンツを切り替えで表示していました。本日はJSを一切に使わず、CSSのみでコンテンツ切替えで表示・非表示してみます。
当サイトのいつもの流れで、まずはソースコードを貼り付けます。コピペで実機検証してください。

<style>
.TogglePanel__checker {
  display: none;
}
.TogglePanel__label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  background: #0bd;
  color: #FFF;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.TogglePanel__label:hover {
  background: #0090aa;
}
.TogglePanel__text {
  -webkit-transition: .3s ease;
  transition: .3s ease;
  height: 0;
  overflow: hidden;
  background: #F5F0CF;
  margin-top: 10px;
  padding: 0;
  border-radius: 5px;
}
.TogglePanel__checker:checked + .TogglePanel__label + .TogglePanel__text {
  height: auto;
  padding: 15px;
}

.TogglePanel__label:before {
	content: "表示";
}
.TogglePanel__checker:checked + .TogglePanel__label:before {
	content: "隠す";
}


</style>

<div class="TogglePanel">
	<input id="toggle-panel-checker" type="checkbox" class="TogglePanel__checker">
	<label class="TogglePanel__label" for="toggle-panel-checker"></label>

	<div class="TogglePanel__text">
	  <p>表示/隠すボタンでテキスト表示のON/OFFで切替ができます。</p>
	  <p><dfn id=benri><abbr title="一番便利なサイトを目指して">便利ジャパン</abbr></dfn>は、このブログ掲載している技術を活用してサイトを開発しています。御興味がある方はぜひ<b>www.benri.jp</b>へアクセスしてみてください。</p>
	  <span>便利ジャパン　中国式産み分けカレンダーの検索フォームはこの技術の活用例です。検索フォーム右上の[表示/非表示]でコンテンツ表示/隠すを切替。</span>
	</div>

</div>