Trying to open and close a accordion with JavaScript. This is what I have so far, but it doesn't work. I really can't find the mistake (I know there is one!!!)
const sContent = document.getElementsByClassName("content"),
sHeader = document.querySelectorAll(".header");
function toggleSki() {
let itemClass = this.parentNode.className;
for (i = 0; i < sContent.length; i++) {
sContent[i].className = "content close";
}
if (itemClass === "content close") {
this.parentNode.className = "content open";
}
}
sHeader.forEach((el) => {
el.addEventListener("click", toggleSki);
});.close .list {
height: 0;
overflow: hidden;
transition: 0.3s;
}
.open .list {
height: auto;
margin-bottom: 2.5em;
;
}
.open .arrow {
transform: rotate(-180deg);
}<div class="content close">
<div class="header">
<div class="title">
<h3>headline</h3>
<span>Sub title</span>
</div>
</div>
<div class="list grid">
<div class="data">
<div class="titles flex">
<h4 class="name">ABC</h4>
<p class="number">100%</p>
</div>
<div class="bar">
<div class="perc bg"></div>
<div class="bar_bg 4d"></div>
</div>
</div>
</div>
</div>in case your code still doesn't run on your environment. I think the problem might be that your for loop misses a variable declaration:
for (let i = 0; i < sContent.length; i++)
should solve the difficulties