#CSSでアコーディオンを作成しよう
っていうやつです。
今回はFont Awesomeのアイコンを使用してみました。
https://fontawesome.com/
Bootstrapみたいにclassに規定のものを指定するだけでアイコンが表示されて便利でした
そして初学者からするとアイコンがでるだけで楽しかった◎
##アコーディオンを開くためのラベル作成
まずこちらで対応するアコーディオンのラベルとチェックボックスを作成します。
accordion.html
<!-- hiddenになっているチェックボックスに紐付くラベル -->
<label for="target_1" class="checkbox_label" >
<i class="fa fa-user fa-fw"></i>Profile
</label>
<!-- チェックボックスのチェックの有無をクリックでの分岐に使用 -->
<input type="checkbox" id="target_1" class="hidden_checkbox" style="display: none;">
<!-- ここのdivはクリックされた時に表示 -->
<div class="hidden_box">
<p>表示します</p>
</div>
そして、彼らにCSSを提供します
/***** チェック前 *******************************/
/*ボックス消す*/
.hidden_box{
display: none;
}
/***** チェック後 *******************************/
/*ボックス表示*/
.hidden_checkbox:checked + .hidden_box{
display: block;
}
チェックされたチェックボックスの下にあるdivに対してdisplayをして、表示をさせています。
とりあえずここまでの結果がこちら↓↓
アコーディオン感がない、、、
びよーんって出てくる感が必要な気がしたので、displayからheightで高さを持たせる方向に変更します
/***** チェック前 *******************************/
/*ボックス消す*/
.hidden_box{
max-height: 0;
overflow: hidden;
transition: 0.5s;
}
/***** チェック後 *******************************/
/*ボックス表示*/
.hidden_checkbox:checked + .hidden_box{
max-height: 50;
}
そして、出てくる側に出てきてることがわかりやすいように色をつけると、、
っぽい感じになった！(hover時の色も少し変えてみた)
あとはラベルに対して開いてる感が欲しいので、
ラベルに矢印アイコンをつけて開閉に応じて矢印を向きが変わるやつも一緒にします。
矢印を下に向ける分岐がわからなかった、、、
チェックされた時に,上向きをdisplay: none;にして、
下向きを表示する、という風にしたかったけど、わからなかったので、ここまで〜
とりあえず複数並べて盛り合わせの完成〜
#まとめ
- アイコンの変更までを行うとjQueryを使った方が楽だなと思った
- そして、CSSの勉強の必要性を感じた、、
- そして、色の配色センスがなかった、、
CSSのみでアイコンの表示変更がお分かりになる方がいらっしゃいましたら、
教えてください、、
アイコン用にhiddenのチェックボックスを作成してラベルと紐づけて、
アイコンの上に配置する、とかしたらできる気がしたけど、ご飯タイム🍙