Skip to main content

Collapsible

MSK Collapsible은 단일 영역을 접었다 펼치는 primitive입니다. 여러 항목을 묶는 Accordion과 달리 독립된 하나의 show/hide 영역에 사용합니다.

Preview​

Data API​

<div data-msk-collapsible data-msk-collapsible-open="false">
  <button type="button" data-msk-collapsible-trigger>더 보기</button>
  <div data-msk-collapsible-content hidden>접었다 펼치는 내용입니다.</div>
</div>

JavaScript API​

window.MSK.ui.collapsible.toggle(root);
window.MSK.ui.collapsible.set(root, true);

Events​

root.addEventListener('msk:collapsible-change', (event) => {
  console.log(event.detail.open);
});

Accessibility​

  • 트리거는 aria-expanded + aria-controls, 영역은 data-state(open/closed)를 동기화합니다.
  • data-msk-collapsible-open="true" 로 기본 열림 상태를 지정합니다.