무너지다

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

작동 방식

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

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

예시

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

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

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

href와 연결

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-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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>

수평의

축소 플러그인은 수평 축소도 지원합니다. 대신에 .width전환할 수식어 클래스를 추가하고 직계 자식 요소를 설정합니다 . 자유롭게 사용자 정의 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-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      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>에서 JQuery 선택기로 참조하여 여러 요소를 표시하거나 숨길 수 있습니다 . 다중 또는 각 요소가 또는 속성 으로 참조하는 경우 요소를 표시하거나 숨길 수 있습니다.hrefdata-target<button><a>hrefdata-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-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

아코디언 예

카드 구성 요소를 사용하여 기본 축소 동작을 확장하여 아코디언을 만들 수 있습니다. .accordion아코디언 스타일을 제대로 구현하려면 래퍼 로 사용해야 합니다 .

첫 번째 아코디언 패널에 대한 일부 자리 표시자 콘텐츠입니다. 이 패널은 .show클래스 덕분에 기본적으로 표시됩니다.

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

접근성

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

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

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

용법

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

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

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

데이터 속성을 통해

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

접을 수 있는 영역에 아코디언과 같은 그룹 관리를 추가하려면 data 속성을 추가합니다 data-parent="#selector". 실제 작동을 보려면 데모를 참조하십시오.

자바스크립트를 통해

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

$('.collapse').collapse()

옵션

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

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

행동 양식

비동기식 메서드 및 전환

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

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

`.collapse(options)`

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

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

축소 가능한 요소를 표시 또는 숨김으로 전환합니다. 접을 수 있는 요소가 실제로 표시되거나 숨겨 지기 전(즉, shown.bs.collapse또는 hidden.bs.collapse이벤트가 발생하기 전) 호출자에게 반환합니다.

`.collapse('show')`

접을 수 있는 요소를 표시합니다. 접을 수 있는 요소가 실제로 표시 되기 전(즉, shown.bs.collapse이벤트가 발생하기 전) 호출자에게 반환합니다.

`.collapse('hide')`

접을 수 있는 요소를 숨깁니다. 접을 수 있는 요소가 실제로 숨겨 지기 전(즉, hidden.bs.collapse이벤트가 발생하기 전) 호출자에게 반환됩니다.

`.collapse('dispose')`

요소의 붕괴를 파괴합니다.

이벤트

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

이벤트 유형	설명
show.bs.collapse	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시됨.bs.collapse	이 이벤트는 축소 요소가 사용자에게 표시되면 시작됩니다(CSS 전환이 완료될 때까지 대기).
hide.bs.collapse	`hide`이 이벤트는 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.collapse	이 이벤트는 축소 요소가 사용자에게 숨겨져 있을 때 시작됩니다(CSS 전환이 완료될 때까지 기다림).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})

무너지다

작동 방식

예시

수평의

다중 대상

아코디언 예

접을 수 있는 그룹 항목 #1

접을 수 있는 그룹 항목 #2

접을 수 있는 그룹 항목 #3

접근성

용법

데이터 속성을 통해

자바스크립트를 통해

옵션

행동 양식

비동기식 메서드 및 전환

.collapse(options)

.collapse('toggle')

.collapse('show')

.collapse('hide')