본문으로 건너뛰기

Accordion

MSK Accordion은 FAQ, 설정 그룹, 긴 설명처럼 접힘/펼침이 필요한 콘텐츠를 다룹니다. 기본은 한 항목만 열리며, 필요하면 여러 항목을 동시에 열 수 있습니다.

Preview

짧은 텍스트 안내는 tooltip, 선택 가능한 작은 패널은 popover를 사용합니다.

Data API

<div data-msk-accordion>
  <button type="button" data-msk-accordion-target="#faq-1">
    질문
  </button>
  <div id="faq-1" hidden>답변</div>
</div>

여러 항목을 동시에 열려면 root에 추가합니다.

<div data-msk-accordion data-msk-accordion-multiple="true">

JavaScript API

window.MSK.ui.accordion.toggle(button);
window.MSK.ui.accordion.setItem(button, true);

Rules

접힘/펼침은 aria-expanded와 hidden으로 동기화합니다.
tabular navigation이 필요한 경우 accordion이 아니라 tabs를 사용합니다.

Preview
Data API
JavaScript API
Rules