今回はHTMLとCSSのみでアコーディオンUIを実装する。
実装の概略
アコーディオンUIの実装方法の概略としては下記の通り。
1.チェックボックスを使用して、アコーディオンの開閉の状態を保持する
2.チェックボックスは非表示にする
3.デフォルトはアコーディオンが閉じた状態
4.チェックボックスにチェックされていない場合はアコーディオンは閉じる
5.チェックボックスにチェックされている状態の場合はアコーディオンが開く
下準備
まずは下準備として必要なHTML要素を書き出していきます。
通常、アコーディオンとなる要素は複数あると思うので、2つのアコーディオンのブロックを擁しておきます。
labelタグはチェックボックスを指しており、アコーディオンのタイトル部分をクリックすると。チェックボックスにチェックが入るようにしておきます。
<div class="accordion_block">
<input type="checkbox" id="acordion_check1" />
<div class="accordion_title">
<label for="acordion_check1">
<p>アコーディオンのタイトル1</p>
</label></div>
<div class="acordion_contents">
<p>アコーディオンのコンテンツ1</p>
</div>
</div>
<div class="accordion_block">
<input type="checkbox" id="acordion_check2" />
<div class="accordion_title">
<label for="acordion_check">
<p>アコーディオンのタイトル2</p>
</label>
</div>
<div class="acordion_contents">
<p>アコーディオンのコンテンツ2</p>
</div>
</div>
<style>
.accordion_title{
width:500px;
height: 100px;
background:blue;
}
.acordion_contents{
width:500px;
height: 200px;
background:orange;
}
.accordion_block{
margin-bottom:30px !important;
}
</style>アコーディオンのコンテンツ1
アコーディオンのコンテンツ2
実装
実装は下記の手順で行う。
1.checkboxを非表示にする。
チェックボックスは開閉状態を表現するために使用するため、ここでは非表示にする
2.アコーディオンの閉じた状態を実装する
アコーディオンが閉じている時は、コンテンツ部分は高さを0にする。
3.チェックボックスにチェックが入ったらアコーディオンが開くようにする。
アコーディオンが開いているとき(チェックボックスにチェックが入った時)は、コンテンツ部分に高さを付ける。
4.アニメーションを付ける
最後に見てくれをよくするために、アニメーションをつける。
input[type="checkbox"]{
display:none; /* 追加 ①チェックボックスを非表示にする */
}
.accordion_title2{
width:500px;
height: 100px;
background:blue;
}
.acordion_contents2{
width:500px;
height: 0; /* 修正 ②通常時は高さを0にする*/
overflow:hidden;/* 追加 ②はみ出る部分は非表示にする*/
background:orange;
transition:.3s ease; /* 追加 ④アニメーションをつける */
}
/* 追加ここから */
input[type="checkbox"]:checked~div.acordion_contents2{
height:200px !important; /* ③チェックボックスにチェックがついたら */
}
/* 追加ここまで */
.accordion_block2{
margin-bottom:30px !important;
}
アコーディオンのコンテンツ1
アコーディオンのコンテンツ2
