what I am trying to do just show some text on click with JavaScript by giving it an active class.as you can see there are two buttons with same class of parent as-well as the children only the contents are different. but only the first button is working because I am passing the array value of [0].is there a way to do all the buttons? thank you..
let arrowbtn = document.getElementsByClassName("story-contents-title")[0];
let info = document.getElementsByClassName("story-contents-discription")[0];
arrowbtn.addEventListener("click", () => {
info.classList.toggle("active");
arrowbtn.classList.toggle("active");
});.story-title {
color: #377dff;
}
.story-contents {
margin-top: 1rem;
}
.story-contents-title {
background-color: white;
color: white;
border: solid 2px #377dff;
padding: 0.5rem;
font-size: 4rem;
border-radius: 10px;
width: 20rem;
color: #377dff;
}
.story-contents-title svg {
stroke: #377dff;
transition: all 0.5s ease-out;
}
.story-contents-title.active svg {
transform: rotate(90deg);
}
.story-contents-discription {
margin-top: 0.5rem;
padding: 1rem;
color: white;
background-color: #377dff;
border-radius: 10px;
display: none;
}
.story-contents-discription.active {
display: block;
}<div class="story">
<h1 class="story-title">Our Story</h1>
<div class="story-contents">
<button class="story-contents-title">2021<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
</svg></button>
<p class="story-contents-discription">Wins ‘Outstanding Crisis Finance Innovation 2021 (Asia Pacific) Award’ by Global Finance Magazine <br> Launches Step Up Credit Card <br> Wins ‘Digital Lending Award’ at the Fintech India Innovation Awards <br> Wins “Excellence in Consumer Lending”
at India Digital Awards</p>
</div>
<div class="story-contents">
<button class="story-contents-title">2020<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
</svg></button>
<p class="story-contents-discription">
Upgrades in-house systems to enable work-from-home for employees <br> Launches Free Credit Report in Regional Languages
</p>
</div>
</div>>Solution :
I would delegate and navigate within the container
document.querySelector(".story").addEventListener("click", function(e) {
const tgt = e.target.closest("button");
tgt.closest(".story-contents").querySelector(".story-contents-discription").classList.toggle("active");
tgt.classList.toggle("active");
});.story-title {
color: #377dff;
}
.story-contents {
margin-top: 1rem;
}
.story-contents-title {
background-color: white;
color: white;
border: solid 2px #377dff;
padding: 0.5rem;
font-size: 4rem;
border-radius: 10px;
width: 20rem;
color: #377dff;
}
.story-contents-title svg {
stroke: #377dff;
transition: all 0.5s ease-out;
}
.story-contents-title.active svg {
transform: rotate(90deg);
}
.story-contents-discription {
margin-top: 0.5rem;
padding: 1rem;
color: white;
background-color: #377dff;
border-radius: 10px;
display: none;
}
.story-contents-discription.active {
display: block;
}<div class="story">
<h1 class="story-title">Our Story</h1>
<div class="story-contents">
<button class="story-contents-title">2021<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
</svg></button>
<p class="story-contents-discription">Wins ‘Outstanding Crisis Finance Innovation 2021 (Asia Pacific) Award’ by Global Finance Magazine <br> Launches Step Up Credit Card <br> Wins ‘Digital Lending Award’ at the Fintech India Innovation Awards <br> Wins “Excellence in Consumer Lending”
at India Digital Awards</p>
</div>
<div class="story-contents">
<button class="story-contents-title">2020<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right" width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
</svg></button>
<p class="story-contents-discription">
Upgrades in-house systems to enable work-from-home for employees <br> Launches Free Credit Report in Regional Languages
</p>
</div>
</div>