var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var active = document.querySelector(".accordion.active");
if (active && active != this) {
active.classList.remove("active");
active.nextElementSibling.classList.remove("show");
}
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
var accd = document.getElementsByClassName("accordion-deep");
var j;
for (j = 0; j < acd.length; j++) {
acc[j].onclick = function() {
var activeDeep = document.querySelector(".accordion-deep.active");
if (activeDeep && activeDeep != this) {
activeDeep.classList.remove("active-deep");
activeDeep.nextElementSibling.classList.remove("show");
}
this.classList.toggle("active-deep");
this.nextElementSibling.classList.toggle("show");
}
}
<button class="accordion">Section 1</button>
<div id="foo" class="panel">
<button class="accordion-deep">Section 1</button>
<div id="foo" class="panel-deep">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
I came across this code snippet in a forum and it has been working well for me. However, I encountered an issue when trying to add another accordion into section 1. Currently, the section closes whenever I click on a deeper accordion panel. I attempted to create another variable for the deeper accordion without success.
CSS: toggle accordion panel?