css3のみでアコーディオン表現
この記事は2015年2月12日に書かれたもので、内容が古い可能性がありますのでご注意ください。
jqueryなどで表現することが多いアコーディオンをcss3のみで作成してみました。
ただしアニメーションさせる場合は表示領域の高さが固定となる弱点があるため使うメリットは低いと思います。。汗
まずはhtmlです。
<div class="accordion"> <label for="adBtn1-1">ボタン1</label> <input type="checkbox" id="adBtn1-1"> <div class="accordionIn"> <p>テキスト<br>テキスト</p> <!-- /.accordionIn --></div> <label for="adBtn1-2">ボタン2</label> <input type="checkbox" id="adBtn1-2"> <div class="accordionIn"> <p>テキスト</p> <!-- /.accordionIn --></div> <label for="adBtn1-3">ボタン3</label> <input type="checkbox" id="adBtn1-3"> <div class="accordionIn"> <p>テキスト<br>テキスト</p> <!-- /.accordionIn --></div> <!-- /.accordion --></div>
htmlで重要な箇所はラベルとチェックボックスです。
ラベルを押してチェックボックスにチェックが入れば開く動作を行います。
またcssの隣接セレクタを使用するため、チェックボックスと表示させるブロック（今回であれば.accordionIn）を隣り合わせする必要があります。
続いてcssです。
.accordion label {
display: block;
margin: 0;
padding: 10px;
border-bottom: 1px solid #ccc;
background: #fc3;
color: #fff;
cursor: pointer;
}
.accordion input[type="checkbox"]{
display: none;
}
.accordion .accordionIn {
overflow: hidden;
height: 0;
text-decoration: none;
-webkit-transition: height .5s ease-out;
transition: height .5s ease-out;
}
.accordion input[type="checkbox"]:checked + .accordionIn{
height: 70px;
}
こちらでキモとなるのは表示エリアの非表示方法と:checkedセレクタでチェックの有無を判断する事です。
非表示は通常display:none;で非表示にすることが多いかと思います。
そのやり方でも表示・非表示は可能ですがtransitionを使ったアニメーションはできません。
そこでheightとoverflowで非表示にさせ、heightの数値でアニメーションさせます。
ただこのやり方ですと高さが固定になるため汎用性は低いです。。
一応サンプルページを以下に用意しました。
今回はアニメーションさせるために高さ固定となりますが、アニメーションさせなければ固定する必要はないです。
また今回はチェックボックスで行いましたがラジオボタンでも可能です。
その場合押した箇所以外は閉じる挙動になります。
ads
