위아래로 아코디언(accordion) 형식으로 메뉴를 펼치고 접는 로직을 짜면서
메소드를 정리하고자 부트스트랩의 콜랩스 예제를 정리했다.
아코디언(Accordion) 타입 예제
See the Pen Untitled by jeongmin Oh (@JoeyBingGreen) on CodePen.
1. href or data-target
첫번째 예시는 클릭했을때 펼칠 영역을 href를 사용하여 선언하였고,
두번째 예시는 클릭하였을때 펼칠 영역을 data-target을 사용하여 선언하였다.
접힌 대상은 두가지 속성을 사용하여 요소를 표시하고 숨길 수 있다.
다만, 두가지 속성을 이용할때 data-toggle="collapse" 선언은 필수이다.
2. role
컨트롤의 HTML 요소가 버튼이 아닌 경우에는 role에 속성을 추가해야한다.
위의 예시의 경우 div 속성이므로 role에 tablist 를 지정하였다.
3. aria-controls
컨트롤 요소가 단일 축소 가능요소를 대상으로 하는 경우(위 예제에서는 data-target 속성에 id를 부여한 부분으로 이해하면 됨), aria-controls 속성을 추가해야 한다.
4. in
첫번째 예시 accEx1 아이디를 가지는 div태그 부분을 보면 class에 in 을 볼 수 있다.
해당 클래스를 선언함으로써 첫번째 요소를 디폴트로 펼쳐놓도록 구현한 것이다.
(접고싶다면 해당 클래스를 지우면 된다.)
참고사이트 : https://getbootstrap.com/docs/3.3/javascript/#collapse