어코디언

어코디언 (Accordion)

Collapse JavaScript 플러그인과 함께 세로로 접히는 어코디언을 만듭니다.

출처: 문서

본문

동작 방식 (How it works)

어코디언은 내부적으로 콜랩스를 사용해 접을 수 있게 만듭니다.

이 컴포넌트의 애니메이션 효과는 prefers-reduced-motion 미디어 쿼리에 의존합니다. 저희 접근성 문서의 reduced motion 섹션을 참고하세요.

예제 (Example)

아래 어코디언을 클릭해 어코디언 콘텐츠를 펼치거나 접어보세요.

기본으로 펼쳐져 있는 어코디언을 렌더링하려면:

.accordion-collapse 요소에 .show 클래스를 추가하세요.
.accordion-button 요소에서 .collapsed 클래스를 제거하고 그 aria-expanded 속성을 true로 설정하세요.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

플러시 (Flush)

.accordion-flush를 추가해 몇 가지 테두리와 둥근 모서리를 제거하면 어코디언이 부모 컨테이너와 가장자리까지(edge-to-edge) 붙도록 렌더링할 수 있습니다.

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
    </div>
  </div>
</div>

항상 열림 (Always open)

각 .accordion-collapse에서 data-bs-parent 속성을 생략하면, 다른 항목이 열려도 어코디언 항목이 열린 상태를 유지하게 됩니다.

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>This is the second item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

접근성 (Accessibility)

자세한 내용은 콜랩스 접근성 섹션을 읽어보세요.

CSS

변수 (Variables) — v5.2.0에서 추가

Bootstrap의 진화하는 CSS 변수 접근 방식에 따라, 어코디언은 이제 .accordion에 로컬 CSS 변수를 사용해 실시간 커스터마이징을 강화합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 커스터마이징도 여전히 지원됩니다.

--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};

Sass 변수 (Sass variables)

$accordion-padding-y:                     1rem;
$accordion-padding-x:                     1.25rem;
$accordion-color:                         var(--#{$prefix}body-color);
$accordion-bg:                            var(--#{$prefix}body-bg);
$accordion-border-width:                  var(--#{$prefix}border-width);
$accordion-border-color:                  var(--#{$prefix}border-color);
$accordion-border-radius:                 var(--#{$prefix}border-radius);
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);

$accordion-body-padding-y:                $accordion-padding-y;
$accordion-body-padding-x:                $accordion-padding-x;

$accordion-button-padding-y:              $accordion-padding-y;
$accordion-button-padding-x:              $accordion-padding-x;
$accordion-button-color:                  var(--#{$prefix}body-color);
$accordion-button-bg:                     var(--#{$prefix}accordion-bg);
$accordion-transition:                    $btn-transition, border-radius .15s ease;
$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle);
$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis);

// fusv-disable
$accordion-button-focus-border-color:     $input-focus-border-color; // Deprecated in v5.3.3
// fusv-enable
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;

$accordion-icon-width:                    1.25rem;
$accordion-icon-color:                    $body-color;
$accordion-icon-active-color:             $primary-text-emphasis;
$accordion-icon-transition:               transform .2s ease-in-out;
$accordion-icon-transform:                rotate(-180deg);

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");

사용법 (Usage)

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

.collapse는 콘텐츠를 숨깁니다.
.collapse.show는 콘텐츠를 보여줍니다.
.collapsing은 전환이 시작될 때 추가되고 끝나면 제거됩니다.

이 클래스들은 _transitions.scss에서 찾을 수 있습니다.

데이터 속성으로 (Via data attributes)

요소에 data-bs-toggle="collapse"와 data-bs-target을 추가하기만 하면 하나 이상의 콜랩스 요소의 컨트롤이 자동으로 지정됩니다. data-bs-target 속성은 콜랩스를 적용할 CSS 셀렉터를 받습니다. 콜랩스 요소에 collapse 클래스를 추가하는 것을 잊지 마세요. 기본 열림으로 설정하고 싶으면 show 클래스를 추가하세요.

콜랩스 영역에 어코디언 그룹 관리를 추가하려면 data-bs-parent="#selector" 데이터 속성을 추가하세요.

JavaScript로 (Via JavaScript)

수동으로 활성화합니다:

const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))

옵션 (Options)

옵션은 데이터 속성이나 JavaScript로 전달할 수 있으므로 data-bs-animation="{value}"처럼 data-bs-에 옵션 이름을 붙일 수 있습니다. 데이터 속성으로 옵션을 전달할 때는 옵션 이름의 표기(camelCase)를 "kebab-case"로 바꿔야 합니다. 예를 들어 data-bs-customClass="beautifier" 대신 data-bs-custom-class="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에 주어진 값을 덮어씁니다. 또한 기존 데이터 속성이 data-bs-delay='{"show":0,"hide":150}'처럼 JSON 값을 담을 수 있습니다.

최종 설정 객체는 data-bs-config, data-bs-, js 객체를 병합한 결과로, 가장 나중에 주어진 키-값이 다른 것들을 덮어씁니다.

이름	타입	기본값	설명
parent	selector, DOM element	null	parent가 제공되면, 지정된 parent 아래의 모든 콜랩스 요소는 이 콜랩스 항목이 표시될 때 닫힙니다. (전통적인 어코디언 동작과 유사 – 이는 card 클래스에 의존합니다.) 이 속성은 타깃 콜랩스 영역에 설정해야 합니다.
toggle	boolean	true	호출 시 콜랩스 요소를 토글합니다.

메서드 (Methods)

모든 API 메서드는 비동기이며 전환을 시작합니다. 전환이 시작되자마자, 즉 끝나기 전에 호출자에게 반환됩니다. 또한 전환 중인 컴포넌트에 대한 메서드 호출은 무시됩니다. 자세한 내용은 JavaScript 문서를 참고하세요.

콘텐츠를 콜랩스 요소로 활성화합니다. 선택적 options 객체를 받습니다.

생성자(constructor)로 콜랩스 인스턴스를 만들 수 있습니다:

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

메서드	설명
dispose	요소의 콜랩스를 파괴합니다. (DOM 요소에 저장된 데이터를 제거합니다.)
getInstance	DOM 요소에 연결된 콜랩스 인스턴스를 가져올 수 있는 정적 메서드입니다. 이렇게 사용할 수 있습니다: `bootstrap.Collapse.getInstance(element)`.
getOrCreateInstance	DOM 요소에 연결된 콜랩스 인스턴스를 반환하거나, 초기화되지 않았다면 새로 만드는 정적 메서드입니다. 이렇게 사용할 수 있습니다: `bootstrap.Collapse.getOrCreateInstance(element)`.
hide	콜랩스 요소를 숨깁니다. 콜랩스 요소가 실제로 숨겨지기 전에(즉, `hidden.bs.collapse` 이벤트가 발생하기 전에) 호출자에게 반환됩니다.
show	콜랩스 요소를 보여줍니다. 콜랩스 요소가 실제로 보이기 전에(즉, `shown.bs.collapse` 이벤트가 발생하기 전에) 호출자에게 반환됩니다.
toggle	콜랩스 요소를 보이거나 숨김으로 토글합니다. 콜랩스 요소가 실제로 보이거나 숨겨지기 전에(즉, `shown.bs.collapse` 또는 `hidden.bs.collapse` 이벤트가 발생하기 전에) 호출자에게 반환됩니다.

이벤트 (Events)

Bootstrap의 콜랩스 클래스는 콜랩스 기능에 훅을 걸기 위한 몇 가지 이벤트를 노출합니다.

이벤트 타입	설명
hide.bs.collapse	hide 메서드가 호출되는 즉시 발생합니다.
hidden.bs.collapse	콜랩스 요소가 사용자에게 숨겨졌을 때 발생합니다 (CSS 전환이 완료될 때까지 기다립니다).
show.bs.collapse	show 인스턴스 메서드가 호출되는 즉시 발생합니다.
shown.bs.collapse	콜랩스 요소가 사용자에게 보이게 되었을 때 발생합니다 (CSS 전환이 완료될 때까지 기다립니다).

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

더 알아보기 (Learn more)

Bootstrap 문서