개요

접을 수 있는 콘텐츠 섹션을 제공하여 필요한 정보만 펼쳐볼 수 있게 합니다.

HTML 구조

<div class="dewp-accordion" data-accordion="my-accordion">
  <div class="dewp-accordion-item" data-accordion-item="item-1">
    <button class="dewp-accordion-header" data-accordion-header>
      <span class="dewp-accordion-title">첫 번째 아이템</span>
    </button>
    <div class="dewp-accordion-content" data-accordion-content>
      <div class="dewp-accordion-content-inner">내용</div>
    </div>
  </div>
</div>
        

JavaScript 초기화

DEWP.initAccordion(
  document.querySelector('[data-accordion="my-accordion"]'),
  { animation: true, multiple: false, autoClose: true }
);
        

스타일/테마

• 분리형: .dewp-accordion-separated
• 미니멀: .dewp-accordion-minimal
• 테마: .dewp-accordion-primary, .dewp-accordion-success, .dewp-accordion-warning

JS API

// 열기/닫기/토글
DEWP.openAccordionItem('my-accordion', 'item-1');
DEWP.closeAccordionItem('my-accordion', 'item-1');
DEWP.toggleAccordionItem('my-accordion', 'item-1');

// 전체 제어
DEWP.openAllAccordionItems('my-accordion');
DEWP.closeAllAccordionItems('my-accordion');

// 상태 조회
DEWP.isAccordionItemOpen('my-accordion', 'item-1');
DEWP.getActiveAccordionItems('my-accordion');
        

접근성

• 필수 데이터 속성: data-accordion, data-accordion-item, data-accordion-header, data-accordion-content
• 키보드: Tab 이동, Enter/Space로 열기/닫기
• ARIA: 상태에 따라 aria-expanded, aria-controls 자동 적용