CSS로 아코디언 만들어주세요.

이런 놈이야.
이번에는 Font Awesome의 아이콘을 사용해 보았습니다.
https://fontawesome.com/
Bootstrap처럼 클라스에 정해진 것만 아이콘을 표시할 수 있어 편리합니다
그리고 초보자들이 보기엔 아이콘만 있으면 즐거워요.

아코디언 열기 탭 만들기

우선 여기에 대응하는 아코디언의 라벨과 복선상자를 만든다.
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 표시합니다.
여하튼 여기까지의 결과는 이거였어↓

아코디언 느낌도 없고,
'후'하는 느낌이 필요할 것 같아서 디스플레이에서'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 체크 상자를 만들고 탭과 링크
아이콘 위에 놓으면 될 것 같지만 식사 시간🍙
https://github.com/SyoheiYamaki/AccordionWithCss