menu
menu

CSSだけでブロック要素の表示非表示(トグルボタン) | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook11
  • はてなブックマーク8
  • Google+5
  • Pocket0
  • Twitter0

CSSだけでブロック要素の表示非表示(トグルボタン)

  • Labs

CSS3

こんにちは(・∀・)

 CSSだけで作ってみましたシリーズです。今回はトグルボタンによる要素の表示非表示です。

1. チェックボックスで要素の表示非表示サンプル

サンプルデモ

 サンプルデモはこちら!

HTML

<div class="objectopen">
<div class="oo-cont1">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
</div>
<label for="oo-cap1">続きを読む</label>
<input id="oo-cap1" type="checkbox">
<div class="oo-cont2">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
</div>
<!--objectopen--></div>
CSS

.objectopen {
	margin: 0 auto;
}
.objectopen input {
	display: none;
}
.objectopen label {
	color: #4776AF;
	cursor: pointer;
	padding: 0 10px;
}
.objectopen label:hover {
	color: #ccc;
}
.objectopen .oo-cont1 {
	padding: 0 10px;
}
.objectopen .oo-cont2 {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	padding: 0 10px;
}
.objectopen input:checked + .oo-cont2 {
	height: auto;
	padding: 10px;
}

2. ラジオボタンで要素の表示非表示サンプル

サンプルデモ

 サンプルデモはこちら!

HTML

<div class="objectopen2">
<div class="oo-cont1">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
</div>
<label for="oo-cap3">続きを読む</label>
<input id="oo-cap3" type="radio" name="oo">
<div class="oo-cont2">
<p>要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。要素の表示非表示サンプル。</p>
<label for="oo-cap4">閉じる</label>
<input id="oo-cap4" type="radio" name="oo">
</div>
<!--objectopen--></div>
CSS

.objectopen2 {
	margin: 0 auto;
}
.objectopen2 input {
	display: none;
}
.objectopen2 label {
	color: #4776AF;
	cursor: pointer;
	padding: 0 10px;
}
.objectopen2 label:hover {
	color: #ccc;
}
.objectopen2 .oo-cont1 {
	padding: 0 10px;
}
.objectopen2 .oo-cont2 {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	padding: 0 10px;
}
.objectopen2 input:checked + .oo-cont2 {
	height: auto;
	padding: 10px;
}

関連リンク

 jQueryで要素の表示非表示

 JavaScriptで要素の表示非表示

  • カテゴリー:Labs
  • facebook11
  • はてなブックマーク8
  • Google+5
  • Pocket0
  • Twitter0