※ 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) 만들어보자 >

 

※ 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);

           })