如何选择具有相同类名 JavaScript 的多个元素

Question

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>

Answer 1

I would delegate and navigate within the container

 document.querySelector(".story").addEventListener("click", function(e) { // any click in the story div const tgt = e.target.closest("button"); // we click inside a button somewhere, closest makes sure it is the button itself we are getting tgt.closest(".story-contents") // the div holding button AND paragraph .querySelector(".story-contents-discription") // the paragraph .classList.toggle("active"); // toggle active on paragraph tgt.classList.toggle("active"); // toggle active on button });

 .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>