※ Collapse ( 컬랩스 )
☞ 제목 클릭하면 해당 내용이 펼쳐지고, 다른내용은 접히는 특수한 효과를 의미한다. ( 아코디언 효과라고도 한다 )
☞ 주로 FAQ 혹은 도움말 부분에 적용하면 효과적.
☞ 토글 행위를 위한 몇개의 클래스를 이용하는 플러그인이다. ( 사용하기 위해서는 전환 플러그인이 필요 )
※ 전환 플러그인은 transition.js로서, bootstrap.js에 포함되어있다.
※ CSS 전환 에뮬레이터만큼 좋은 transitionEnd 이벤트를 위한 기본 헬퍼이다.
☞ 사용 예시를 통해 확인해보자. < 버튼 클릭을 통해 글 보이기 >
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false"
aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
▶ collapse 클래스 선택자 : 콘텐츠를 숨긴다.
▶ collapsing 클래스 선택자 : 전환중에 적용된다.
▶ collapse in 클래스 선택자 : 콘텐츠를 보여준다.
▶ collapsed 클래스 선택자 : 콘텐츠가 닫힌다.
▶ data-toggle : "collapse"로 설정한다 ( a 태그 )
▶ aria-expanded : 웹 접근성 측면에서 열린 부분은 true, 닫힌부분은 false
▶ aria-controls 속성값은 본문이 보여지게될 부분의 id와 일치해야 한다.
▶ href : 본문이 보여지게될 부분의 id를 입력한다 ( a 태그 )
▶ 본문이 보여지게 될 부분의 class는 collapse가 되어야 한다.
☞ 사용 예시를 통해 확인해보자. < 아코디언(Accordion) 만들어보자 >
aria-controls="collapseOne">
▶ 글자가 아닌 전체적 영역을 클릭했을 때, 이동하도록 만들고 싶다면 css를 추가해주면 된다.
.panel-heading { padding : 0; }
.panel-heading a { padding : 10px 15px; display : block; text-decoration : none ; }
※ Collapse ( 컬랩스 ) 옵션
☞ data옵션은 data- 와 같이 사용된다.
▶ parent : 기본값은 false로, 셀렉터가 제공된다면, 접을 수 있는 요소가 보여질 때 특정 부모 아래 모든 접을수 있는 요소는 닫게 된다.
(일반적으로 panel에 의존한다.)
▶ toggle : 기본값은 true로, 접을 수 있는 요소를 토글한다.
※ Collapse ( 컬랩스 ) 메소드
☞ .collapse(options)
▶ 콘텐츠를 접을 수 있는 요소를 활성화. 추가적 옵션은 객체를 사용할 수 있다.
▶ 아래 코드와 같이 사용된다.
$('#myCollapsible').collapse({
toggle: false
})
☞ .collapse('show')
▶ 접을 수 있는 요소를 보여준다.
☞ .collapse('hide')
▶ 접을 수 있는 요소를 가린다.
※ Collapse ( 컬랩스 ) 이벤트
☞ show.bs.collapse
▶ show 인스턴스 메소드가 호출되는 즉시 실행
☞ shown.bs.collapse
▶ 컬랩스가 사용자에게 보여진 후 실행 ( CSS전환이 완료되기를 기다림 )
☞ hide.bs.collapse
▶ hide 인스턴스 메소드가 호출되는 즉시 실행
☞ hidden.bs.collapse
▶ 컬랩스가 사용자로부터 가려진 후 실행 ( CSS전환이 완료되기를 기다림 )
$('#collapsesample').on('show.bs.collapse', function (e) {
console.dir(e);
})
