<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 $btn = document.querySelectorAll('.faq_list > dl > dt');
        if ($btn.length === 0) return;
        $btn.forEach(el => {
            el.addEventListener('click', e => {
                e.preventDefault();
                let parent_dl = el.closest('dl'); //클릭한 박스
                let hasClass = parent_dl.classList.contains('on'); //클릭한 박스에 class 있는지 확인

                // 기존에 열린박스 있으면 전부 닫기
                const dl_on = document.querySelector('.faq_list > 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();
});