Tagoplus

아코디언 정의

1. 아코디언

<div class="accordion_wrap">
    <div class="accordions">
        <div class="accordion_item active">
            <div class="accordion_head">
                + Lorem ipsum dolor sit?
            </div>
            <div class="accordion_body">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae</p>
                <p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
            </div>
        </div>
        <div class="accordion_item">
            <div class="accordion_head">
                + Lorem ipsum dolor sit?
            </div>
            <div class="accordion_body">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae </p>
                <p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
            </div>
        </div>
        <div class="accordion_item">
            <div class="accordion_head">
                + Lorem ipsum dolor sit?
            </div>
            <div class="accordion_body">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae qu</p>
                <p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
            </div>
        </div>
    </div>
</div>
let btnCollapse = document.getElementById('btn-collapse'),
question = document.getElementsByClassName('panel-question');
for(let i = 0; i < question.length; i++){
    question[i].addEventListener('click', function(){
        classRemove()
        this.classList.add('active');
    })
}
btnCollapse.addEventListener('click', function(){
    classRemove()
});
function classRemove(){
    for(let xx = 0; xx < question.length; xx++){
        question[xx].classList.remove('active');
    }
}