내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
GitHub에서 보기

Collapse(콜랩스)

몇 가지의 클래스와 JavaScript 플러그인을 사용해, 프로젝트 전체의 컨텐츠의 표시를 바꿉니다.

How it works

Collapse(콜랩스) JavaScript 플러그인은, 컨텐츠의 표시와 숨김에 사용됩니다. 버튼 및 앵커는, 토글 하는 특정의 요소에 매핑된 트리거로 사용됩니다. 요소를 접으면 height 가 현재의 값에서 0 으로 애니메이션 합니다. CSS 가 애니메이션을 어떻게 다룰지 감안하면, .collapse 요소에 padding 을 사용할 수 없습니다. 대신, 이 클래스를 독립된 래핑 요소로 사용합니다.

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Example

아래의 버튼을 클릭하면, 클래스 변경에 따라 다른 요소의 표시 맟 숨김을 전환할 수 있습니다.

  • .collapse 컨텐츠를 숨깁니다.
  • .collapsing 이동중에 적용됩니다.
  • .collapse.show 컨텐츠를 표시합니다.

href 속성을 가진 링크, 혹은 data-bs-target 속성을 가진 버튼을 사용할 수 있습니다. 양쪽 다, data-bs-toggle="collapse" 가 필요합니다.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Multiple targets

<button> 이나 <a> 는, 그 hrefdata-bs-target 속성의 셀렉터로 여러 요소를 참조 하는 것으로, 여러 개의 요소를 표시하거나 숨기거나 할 수 있습니다. 여러 개의 <button> 이나 <a> 는, 각각의 hrefdata-bs-target 속성으로 요소를 참조하고 있는 경우, 어느 요소를 표시하거나 숨기거나 할 수 있습니다.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Accessibility

컨트롤 요소에 aria-expanded 를 반드시 추가해 주세요. 이 속성은 컨트롤에 연결된 접을 수 있는 요소의 현재 상태를 스크린 리더나 동일한 지원 기술에 명시적으로 전달합니다. 접을 수 있는 요소가 기본적으로 닫혀있는 경우, 컨트롤 요소의 속성 값은 aria-expanded="false" 이어야 합니다. show 클래스를 사용해 접을 수 있는 요소를 기본으로 열도록 설정한 경우에는, 대신 컨트롤에 aria-expanded="true" 를 설정해 주십시오. 플러그인은 접을 수 있는 요소가 열려 있는지 닫혀 있는 지에 따라(JavaScript 를 통해 사용자가 같은 접을 수 있는 요소와 관련된 별도의 요소를 트리거했기 때문에) 컨트롤 상에서 이 속성을 자동으로 바꿉니다. 컨트롤 요소의 HTML 요소가 버튼이 아닌 경우(예를 들어 <a><div> 등) 요소에 role="button" 속성을 추가해야 합니다.

컨트롤 요소가 하나의 접을 수 있는 요소를 타겟으로 하고 있는 경우, 즉 data-bs-target 속성이 id 셀렉터를 가르키는 경우, 접을 수 있는 요소의 id 를 한 aria-controls 속성을 컨트롤 요소에 추가하지 않으면 안됩니다. 최근 스크린 리더 및 지원 기술에서는 이 속성을 이용하여 접을 수 있는 요소 자체로 직접 이동하기 위한 단축키를 사용자에게 제공하고 있습니다.

Bootstrap 의 현재 구현은, WAI-ARIA Authoring Practices 1.1 accordion pattern 에 설명되어 있는 여러가지 optional 키보드 인터랙션을 커버하고 있지 않음을 주의해 주십시오. - 커스텀 JavaScript 로 이것들을 직접 포함시켜야 합니다.

Usage

collapse 플러그인은, 여러 클래스를 이용하여 중요한 작업을 처리합니다.

  • .collapse 컨텐츠를 숨김
  • .collapse.show 컨텐츠를 표시
  • .collapsing 은 트랜지션이 시작시 추가되어, 종료시 삭제 됨

이들의 클래스는 _transitions.scss 에 있습니다.

Via data attributes

요소에 data-bs-toggle="collapse"data-bs-target 만 추가하면 접을 수 있는 요소의 제어를 자동으로 할당할 수 있습니다. data-bs-target 속성은 접을 수 있는 CSS 셀렉터를 지정합니다. 접을 수 있는 요소에는 반드시 collapse 클래스를 추가해야 합니다. 기본적으로 열린 상태를 만드려면 show 클래스를 추가합니다.

접을 수 있는 영역에 accordion(아코디언) 같은 그룹 관리를 추가하려면, 데이터 속성 data-bs-parent="#selector" 를 추가합니다. 데모를 참조해 주세요.

Via JavaScript

수동으로 유효하게 하는 경우:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Options

옵션은 JavaScript 나 데이터 속성으로 줄 수 있습니다. 데이터 속성의 경우는 data-bs-parent="" 처럼 data-bs- 에 옵션명을 추가합니다.

Name Type Default Description
parent selector | jQuery object | DOM element false parent 가 지정된 경우, 이 접을 수 있는 아이템이 표시될때 지정된 부모 아래에 있는 접을 수 있는 모든 요소가 닫힙니다(기존 accordion(아코디언) 동작과 비슷합니다. - 이것은 card 클래스에 의존합니다). 속성은 접을 수 있는 타겟 영역으로 설정해야 합니다.
toggle boolean true 호출 시에 접을 수 있는 요소를 토글합니다.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

접을 수 있는 요소로서 컨텐츠를 활성화합니다. 옵션의 object 를 받습니다.

컨스트럭터를 사용해, collapse 인스턴스를 작성할 수 있습니다:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Method Description
toggle 접을 수 있는 요소의 표시/숨김을 바꿉니다. 접을 수 있는 요소가 실제로 표시 혹은 숨겨지기 전에 호출되어 원래대로 돌아갑니다. (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
show 접을 수 있는 요소를 표시합니다. 접을 수 있는 요소가 나타나기 전에 호출하여 원래대로 돌아갑니다 (e.g., before the shown.bs.collapse event occurs).
hide 접을 수 있는 요소를 숨깁니다. 접을 수 있는 요소가 실제로 숨겨지기 전에 호출하여 원래 위치로 돌아갑니다 (e.g., before the hidden.bs.collapse event occurs).
dispose 요소의 collapse 을 처리합니다. (DOM 요소에 저장되어 있는 데이터를 삭제합니다)
getInstance DOM 요소와 관련된 collapse 인스턴스를 가져오는 Static 메소드입니다.

Events

Bootstrap 의 collapse 클래스는, collapse 기능을 후킹하기 위한 몇 가지 이벤트를 공개하고 있습니다.

Event type Description
show.bs.collapse 이 이벤트는 show 인스턴스 메소드가 호출될 때 바로 발생합니다.
shown.bs.collapse 이 이벤트는 collapse 요소가 사용자에게 보여질 때 발생합니다(CSS 트랜지션이 완료되는 것을 기다립니다).
hide.bs.collapse 이 이벤트는 hide 메소드가 호출될 때 바로 발생합니다.
hidden.bs.collapse 이 이벤트는 collapse 요소가 사용자에게 숨겨졌을 때 발생합니다(CSS 트랜지션이 완료될 때까지 기다립니다).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})