기본 아코디언

• 타이틀 타이틀접기
  내용
• 타이틀 타이틀펼치기
  내용
  내용
  내용
• 타이틀 타이틀펼치기
  내용
  내용
• 타이틀 타이틀펼치기
  내용

<!-- id는 따로 제어할거 아니면 부여 안해도됨. -->
<ul id="accordion1" class="accordion" data-accr>
    <li id="accordion1_1" class="accordion-item on" data-accr-item>
        <!-- 컨텐츠에 따라 적절한 heading 태그로 바꿔서 쓸 것. -->
        <div class="accordion-header" data-accr-header>
            타이틀
            <!-- button에 id가 없으면 스크립트로 부여됨. -->
            <!-- aria-expanded, aria-controls 스크립트로 부여됨. -->
            <button type="button" class="accordion-button plus on" data-accr-trigger>타이틀<span class="blind">접기</span></button>
        </div>
        <!-- content에 id가 없으면 스크립트로 부여됨. -->
        <!-- aria-labelledby 스크립트로 부여됨. -->
        <div class="accordion-content shown" data-accr-target>
            <div class="accordion-body">
                내용
            </div>
        </div>
    </li>
    ...
</ul>

하나만 열리는 아코디언

• 타이틀 타이틀접기
  내용

  • 아코디언 속 아코디언 아코디언 속 아코디언접기
    내용
  • 아코디언 속 아코디언 아코디언 속 아코디언펼치기
    내용
    내용
    내용
  • 아코디언 속 아코디언 아코디언 속 아코디언펼치기
    내용
    내용
  • 아코디언 속 아코디언 아코디언 속 아코디언펼치기
    내용
• 타이틀 타이틀펼치기
  내용
  내용
  내용
• 타이틀 타이틀펼치기
  내용
  내용
• 타이틀 타이틀펼치기
  내용

애니메이션 효과 없는 아코디언

• 타이틀 타이틀접기
  내용
• 타이틀 타이틀펼치기
  내용
  내용
  내용
• 타이틀 타이틀펼치기
  내용
  내용
• 타이틀 타이틀펼치기
  내용

시점에 따른 이벤트

document.querySelectorAll('[data-accr]').forEach(function (el) {
    /* e.item: [data-accr-item]
     * e.header: [data-accr-header]
     * e.trigger: [data-accr-trigger]
     * e.target: [data-accr-target]
     */
    // 열릴 때
    el.addEventListener('accr.showing', function (e) {
        console.log(e.item, e.header, e.trigger, e.target, 'showing');
    })
    // 열린 후
    el.addEventListener('accr.shown', function (e) {
        console.log(e.item, e.header, e.trigger, e.target, 'shown');
    })
    // 닫힐 때
    el.addEventListener('accr.hiding', function (e) {
        console.log(e.item, e.header, e.trigger, e.target, 'hiding');
    })
    // 닫힌 후
    el.addEventListener('accr.hidden', function (e) {
        console.log(e.item, e.header, e.trigger, e.target, 'hidden');
    })
})

Component 호출(feat. 비동기)

const accrEl = document.querySelector('#accordion1');
const accr = new SKY.Accordion(accrEl);

전체 열기 ([data-accr="only"]에선 안됩니다.)

accr.showAll();

전체 닫기

accr.showAll();

특정 아코디언 열기

accr.show(2); // number
accr.show('#accordion1_3'); // string
accr.show(document.querySelector('#accordion1_3')); // object

특정 아코디언 닫기

accr.show(2); // number
accr.hide('#accordion1_3'); // string
accr.hide(document.querySelector('#accordion1_3')); // object