スライドパネル（クリックするとコンテンツ表示）

ボタンを押すと指定したコンテンツがスルスルッと現れる、便利なスライドパネル。 これにはチェックボックスのオンオフをパネルの開閉ボタンとして利用します。 CSSアニメーションも使えばjQueryで表現していたような滑らかな動きも問題なく実装できます

●HTML

<label for=”check”>Click me</label>
<input id=”check” type=”checkbox”>

<div class=”panel”>
<p>I am some hidden text. ここにテキストが入ります。</p>
</div>

●CSS

body {
font-family: sans-serif;
padding: 20px;
}
input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background: #0bd;
color: #FFF;
-webkit-transition: 0.1s;
transition: 0.1s;
}
label:hover {
background: #0090aa;
}
.panel {
-webkit-transition: .3s ease;
transition: .3s ease;
height: 0;
overflow: hidden;
background: #F5F0CF;
margin-top: 10px;
padding: 0;
border-radius: 5px;
}
input:checked + .panel {
height: auto;
padding: 15px;
}