CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

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

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" 
          aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        첫번째 본문
      </div>
    </div>
  </div>
  ...
</div>
 
▶ aria-expanded : 스크린리더와 비슷한 보조공학에 명확하게 컬랩스 할수 있는 요소의 현재 상태를 정의 ( 닫혀있다면 기본적으로 false 값을 가지게 된다 ( in 클래스 선택자를 사용하여 기본적으로 열리게끔 한다면 true로 설정. )
▶ data-target 속성이 id 셀렉터를 가리키고 있다면 추가적으로 aria-controls 속성을 추가할수 있는데, 이는 스크린 리더와 비슷한 보조 공학은 컬랩스요소를 직접 탐색할 수 있도록 해준다.
▶ panel-heading 부분에 collapse를 감싸면 된다.
▶ data-toggle="collapse"와 data-parent를 panel-group으로 묶고있는 부모의 ID를 넣어주면 된다.
▶ href는 panel-body를 감싸는 요소의 ID를 넣어주면 된다. 
▶ 추가적으로 panel-body를 감싸는 요소는 panel-collapse collapse 클래스 선택자를 설정해야 한다. ( 활성화를 원하면 in도 설정해야 한다 )
▶ 글자가 아닌 전체적 영역을 클릭했을 때, 이동하도록 만들고 싶다면 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);

           })