무너지다

작동 방식

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

예시

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

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

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

<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

<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

<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

부트스트랩의 현재 구현은 ARIA Authoring Practices Guide 아코디언 패턴 에 설명된 다양한 선택적 키보드 상호 작용을 다루지 않는다는 점에 유의하십시오 . 사용자 정의 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". 자세한 내용은 아코디언 페이지 를 참조하세요.

자바스크립트를 통해

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

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

옵션

옵션은 데이터 속성이나 JavaScript를 통해 전달할 수 있으므로 에서 data-bs-와 같이 옵션 이름을 에 추가할 수 있습니다 data-bs-animation="{value}". 데이터 속성을 통해 옵션을 전달할 때 옵션 이름의 대소문자 유형을 " camelCase "에서 " kebab-case "로 변경해야 합니다. 예를 들어, data-bs-custom-class="beautifier"대신 를 사용 data-bs-customClass="beautifier"하십시오.

Bootstrap 5.2.0부터 모든 구성 요소 는 JSON 문자열로 간단한 구성 요소 구성을 수용할 수 있는 실험적 으로 예약된 데이터 속성 을 지원합니다. data-bs-config요소에 data-bs-config='{"delay":0, "title":123}'및 data-bs-title="456"속성이 있는 경우 최종 title값은 456이고 별도의 데이터 속성은 에 제공된 값을 재정의합니다 data-bs-config. 또한 기존 데이터 속성은 와 같은 JSON 값을 저장할 수 data-bs-delay='{"show":0,"hide":150}'있습니다.

행동 양식

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

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

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

이벤트

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})