아코디언 1개만 열리는 예제

• HTML

<div class="accordion">
	<b>Heading 1</b>
</div>
<div class="panel">
	<p class="text-light">Text 1</p>
</div>
<div class="accordion">
	<b>Heading 2</b>
</div>
<div class="panel">
    <p class="text-light">Text 2</p>
</div>

<style>
div.panel {
    display: none;
}
div.panel.show {
    display: block !important;
}
</style>

 

• JS

var acc = document.getElementsByClassName("accordion");

var panel = document.getElementsByClassName('panel');



for (var i = 0; i < acc.length; i++) {

    acc[i].onclick = function() {

            var setClasses = !this.classList.contains('active');

        setClass(acc, 'active', 'remove');

        setClass(panel, 'show', 'remove');

       

               if (setClasses) {

            this.classList.toggle("active");

            this.nextElementSibling.classList.toggle("show");

        }

    }

}



function setClass(els, className, fnName) {

    for (var i = 0; i < els.length; i++) {

        els[i].classList[fnName](className);

    }

}

출처

https://jsfiddle.net/5h5evjpw/