こんにちは（・∀・）
CSSだけで作ってみましたシリーズです。今回は要素の表示非表示です。
対応ブラウザ
IE
Firefox
Opera
Chrome
Safari
サンプル
１．チェックボックスで要素の表示非表示サンプル
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 {
width: 600px;
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;
}
２．ラジオボタンで要素の表示非表示サンプル
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 {
width: 600px;
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;
}