[bootstrap] 부트스트랩 – 여러 개의 콜랩스(Collapse)

여러 개의 콜랩스가 서로 연동되게 만들려면 구성요소의 패널을 사용하며 가장 바깥쪽의 div에 .panel-group 선택자와 id를 추가합니다. 이 아이디(accordion)는 .panel-heading에 있는 a 태그의 data-parent 속성 값과 연결되며 이 링크를 클릭하면 패널의 콘텐츠가 닫히거나 열리고, 닫힌 곳을 클릭하면 이미 열린 곳은 닫히는 토글 기능이 기본으로 돼 있습니다. 

다시 각 a 태그에 있는 href 속성 값은 콘텐츠 영역에 있는 id와 연결됩니다. 콘텐츠 영역의 개폐는 자바스크립트를 사용하므로 data-toggle=”collapse” 속성이 포함돼 있습니다. 

콘텐츠 영역의 클래스 선택자로 .collapse가 있는데 .in이 포함되면 열린 상태가 됩니다. 여기서는 첫번째 콘텐츠 영역에만 .in이 포함돼 있으므로 처음 로딩 시 이 영역이 열린 상태가 됩니다. 닫힌 콘텐츠의 패널 헤딩에는 a 태그에 .collapsed가 있습니다. 닫힌 곳의 헤더 링크를 클릭하면 이 클래스가 제거되면서 콘텐츠 영역의 div에 .in이 추가되고 이전의 div에서는 제거됩니다. 모든 영역을 처음부터 열린 상태로 하려면 모두 .in을 추가하면 됩니다. 

웹 접근성 측면에서 열린 패널의 a 태그에는 aria-expanded 속성을 true로 설정하고 닫힌 곳은 false로 설정합니다. 닫힌 곳을 열면 값이 변경됩니다. a 태그의 aria-controls 속성 값은 콘텐츠 영역의 id와 일치해야 합니다. 

콘텐츠 영역을 열려면 글자가 있는 링크를 클릭해야 하는데 제목 영역 전체에 대해 클릭할 수 있게 하려면 다음과 같이 스타일을 추가합니다.

.panel-heading { padding: 0; }
.panel-heading a { padding: 10px 15px; display:block; text-decoration: none; }

 

콜랩스가 작동하려면 a 태그에 data-toggle=”collapse”만 있으면 되고 별도의 자바스크립트는 필요하지 않습니다. 수동으로 작동하게 하려면 다음과 같이 사용합니다. 이 코드를 추가하면 .in이 있는 곳은 제거되고 없는 곳에는 추가되므로 원래의 상태와는 반대로 됩니다.

$(“.collapse”).collapse();

 

옵션은 toggle:false; 하나만 있으며 이를 추가하면 토글 기능이 제거되므로 하나의 어코디언을 열어도 이미 열린 곳은 닫히지 않습니다.

$(“.collapse”).collapse({ toggle:false; });

 

메소드는 3가지가 있으며 ‘show’를 추가하면 모두 열린상태, ‘hide’를 추가하면 모두 닫힌 상태, ‘toggle’을 추가하면 위 자바스크립트를 추가하지 않은 것처럼 처음의 상태로 됩니다. 즉, .in이 있는 곳만 열립니다.

$().collapse(“toggle”);
$().collapse(“show”);
$().collapse(“hide”);

 

이벤트는 4가지가 있으며 다음과 같은 형태입니다.

$(“.collapse”).on(“show.bs.collapse”, function() {
alert(“이벤트 실행됨”);
});

 

• show.bs.collapse : 헤더 링크를 클릭하면 콘텐츠 영역이 열리기 전에 이벤트가 실행됩니다.
• shown.bs.collapse : 콘텐츠 영역이 열린 후에 이벤트가 실행됩니다.
• hide.bs.collapse : 이미 열린 콘텐츠 영역이 닫히기 전에 이벤트가 실행됩니다.
• hidden.bs.collapse : 이미 열린 콘텐츠 영역이 닫힌 후에 이벤트가 실행됩니다.