<div class="faq_list">
    <?php for ($i=0; $i < 5; $i++) { ?>
    <dl>
        <dt><em>Q</em><strong>창업비용은 얼마나 들고, 최소 얼마부터 시작 가능한가요?</strong><i class="axi axi-keyboard-arrow-down"></i></dt>
        <dd><div class="nostyle">네, 담당 슈퍼바이저 배정, 마케팅 지원, 메뉴 리뉴얼 등 오픈 이후에도 본사에서 지속적으로 운영을 관리합니다.</div></dd>
    </dl>
    <?php } ?>
</div>

//faq list
const faq_toggle = {
    init(){
        this.action();
    },
    action(){
        const faqLists = document.querySelectorAll('.faq_list');
        if (!faqLists.length) return;
        faqLists.forEach(faq => {
            const $btn = faq.querySelectorAll('dl > dt');
            $btn.forEach(el => {
                el.addEventListener('click', e => {
                    e.preventDefault();
                    const parent_dl = el.closest('dl');
                    const hasClass = parent_dl.classList.contains('on');
                    // 해당 faq_list 안에서만 찾기
                    const dl_on = faq.querySelector('dl.on');
                    if (dl_on) {
                        dl_on.classList.remove('on');
                        slideUp(dl_on.lastElementChild, 200);
                    }
                    if (!hasClass){
                        parent_dl.classList.add('on');
                        slideDown(el.nextElementSibling, 200);
                    }
                });
            });
        });
    }
};
document.addEventListener('DOMContentLoaded', () => {
    faq_toggle.init();
});