주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

무너지다

몇 가지 클래스와 JavaScript 플러그인을 사용하여 프로젝트 전체에서 콘텐츠의 가시성을 전환합니다.

이 페이지에서

작동 방식

축소 JavaScript 플러그인은 콘텐츠를 표시하고 숨기는 데 사용됩니다. 버튼이나 앵커는 토글하는 특정 요소에 매핑되는 트리거로 사용됩니다. height요소를 축소하면 현재 값에서 로 애니메이션이 적용 됩니다 0. CSS가 애니메이션을 처리하는 방식을 감안할 때 요소 padding에 사용할 수 없습니다 . .collapse대신 클래스를 독립적인 래핑 요소로 사용하십시오.

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

예시

클래스 변경을 통해 다른 요소를 표시하거나 숨기려면 아래 버튼을 클릭하십시오.

  • .collapse내용을 숨깁니다
  • .collapsing전환 중에 적용됩니다.
  • .collapse.show콘텐츠를 보여줍니다

일반적으로 data-bs-target속성이 있는 버튼을 사용하는 것이 좋습니다. 의미론적 관점에서 권장되지는 않지만 href속성(및 a role="button")과 함께 링크를 사용할 수도 있습니다. 두 경우 모두 data-bs-toggle="collapse"필수입니다.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. 
<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

수평의

축소 플러그인은 수평 축소도 지원합니다. 대신에 .collapse-horizontal전환할 수식어 클래스를 추가하고 직계 자식 요소를 설정합니다 . 자유롭게 사용자 정의 Sass를 작성하거나 인라인 스타일을 사용하거나 너비 유틸리티 를 사용하십시오 .widthheightwidth

아래 예제에는 min-height문서에서 과도한 다시 그리기를 방지하기 위한 설정이 있지만 명시적으로 필요한 것은 아닙니다. on 자식 요소만 필요합니다 .width

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. 
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

다중 대상

<button>or 는 or 속성 의 <a>선택기로 여러 요소를 참조하여 여러 요소를 표시하거나 숨길 수 있습니다 . 다중 또는 각 요소가 또는 속성 으로 참조하는 경우 요소를 표시하거나 숨길 수 있습니다.hrefdata-bs-target<button><a>hrefdata-bs-target

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. 
<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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

접근성

aria-expanded컨트롤 요소 에 추가 해야 합니다. 이 속성은 컨트롤에 연결된 접을 수 있는 요소의 현재 상태를 화면 판독기 및 유사한 보조 기술에 명시적으로 전달합니다. 접을 수 있는 요소가 기본적으로 닫혀 있는 경우 제어 요소의 속성 값은 aria-expanded="false". show클래스 를 사용하여 기본적으로 열리도록 접을 수 있는 요소를 설정 aria-expanded="true"한 경우 대신 컨트롤에서 설정합니다. 플러그인은 축소 가능한 요소가 열렸거나 닫혔는지 여부(JavaScript를 통해 또는 사용자가 동일한 축소 가능한 요소에 연결된 다른 제어 요소를 트리거했기 때문에)에 따라 컨트롤에서 이 속성을 자동으로 토글합니다. 컨트롤 요소의 HTML 요소가 버튼이 아닌 경우(예: <a>또는 <div>), 속성은role="button"요소에 추가해야 합니다.

제어 요소가 단일 축소 가능한 요소를 대상으로 하는 경우(즉, 속성이 선택기 data-bs-target를 가리키는 경우) 축소 가능한 요소 를 포함하는 속성을 제어 요소에 추가해야 합니다 . 최신 화면 판독기 및 유사한 보조 기술은 이 속성을 사용하여 사용자에게 접을 수 있는 요소 자체로 직접 이동할 수 있는 추가 단축키를 제공합니다.idaria-controlsid

Bootstrap의 현재 구현은 WAI-ARIA Authoring Practices 1.1 아코디언 패턴 에 설명된 다양한 선택적 키보드 상호 작용을 다루지 않는다는 점에 유의하십시오 . 사용자 정의 JavaScript에 이러한 상호 작용을 직접 포함해야 합니다.

사스

변수

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

클래스

축소 전환 클래스는 scss/_transitions.scss여러 구성 요소(접기 및 아코디언)에서 공유되므로 에서 찾을 수 있습니다.

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

용법

접기 플러그인은 무거운 작업을 처리하기 위해 몇 가지 클래스를 사용합니다.

  • .collapse내용을 숨깁니다
  • .collapse.show내용을 보여줍니다
  • .collapsing전환이 시작될 때 추가되고 완료되면 제거됩니다.

이러한 클래스는 에서 찾을 수 있습니다 _transitions.scss.

데이터 속성을 통해

data-bs-toggle="collapse"요소에 및 를 추가하기만 하면 data-bs-target하나 이상의 접을 수 있는 요소에 대한 제어를 자동으로 할당할 수 있습니다. 속성 은 data-bs-target축소를 적용할 CSS 선택기를 허용합니다. collapse접을 수 있는 요소 에 클래스를 추가해야 합니다 . 기본적으로 열리도록 하려면 추가 클래스를 추가하십시오 show.

접을 수 있는 영역에 아코디언과 같은 그룹 관리를 추가하려면 data 속성을 추가합니다 data-bs-parent="#selector". 자세한 내용은 아코디언 페이지 를 참조하세요.

자바스크립트를 통해

다음을 사용하여 수동으로 활성화:

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

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-bs-와 같이 옵션 이름을 에 추가합니다 data-bs-parent="".

이름 유형 기본 설명
parent 선택기 | jQuery 객체 | DOM 요소 false 부모가 제공되면 이 축소 가능한 항목이 표시될 때 지정된 부모 아래의 모든 축소 가능한 요소가 닫힙니다. (기존의 아코디언 동작과 유사 - 이것은 card클래스에 따라 다릅니다). 속성은 대상 축소 가능 영역에 설정되어야 합니다.
toggle 부울 true 호출 시 접을 수 있는 요소를 토글합니다.

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오 .

콘텐츠를 접을 수 있는 요소로 활성화합니다. 선택적 옵션을 허용합니다 object.

생성자를 사용하여 축소 인스턴스를 만들 수 있습니다. 예를 들면 다음과 같습니다.

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
방법 설명
toggle 축소 가능한 요소를 표시 또는 숨김으로 전환합니다. 접을 수 있는 요소가 실제로 표시되거나 숨겨 지기 전(즉, shown.bs.collapse또는 hidden.bs.collapse이벤트가 발생하기 전) 호출자에게 반환됩니다.
show 접을 수 있는 요소를 표시합니다. 접을 수 있는 요소가 실제로 표시 되기 전(예: shown.bs.collapse이벤트가 발생하기 전) 호출자에게 반환합니다.
hide 접을 수 있는 요소를 숨깁니다. 접을 수 있는 요소가 실제로 숨겨 지기 전(예: hidden.bs.collapse이벤트가 발생하기 전) 호출자에게 반환합니다.
dispose 요소의 붕괴를 파괴합니다. (DOM 요소에 저장된 데이터 제거)
getInstance DOM 요소와 연결된 축소 인스턴스를 가져올 수 있는 정적 메서드는 다음과 같이 사용할 수 있습니다.bootstrap.Collapse.getInstance(element)
getOrCreateInstance DOM 요소와 연결된 축소 인스턴스를 반환하거나 초기화되지 않은 경우 새 인스턴스를 만드는 정적 메서드입니다. 다음과 같이 사용할 수 있습니다.bootstrap.Collapse.getOrCreateInstance(element)

이벤트

부트스트랩의 접기 클래스는 접기 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

이벤트 유형 설명
show.bs.collapse show이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
shown.bs.collapse 이 이벤트는 축소 요소가 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 대기).
hide.bs.collapse hide이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.collapse 이 이벤트는 축소 요소가 사용자에게 숨겨졌을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림). 
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})