我想添加一个手风琴，但它没有打开

Question

Accordion is not opening on clicking upon the button.

please help.

many thanks!

please find code written below: please find code written below: please find code written below: please find code written below: please find code written below: please find code written below: please find code written below: please find code written below: please find code written below: please find code written below: please find code written below: please find code written below:

please find code written below:

 < script > document.querySelectorAll("accordion__button").forEach(button => { button.addEventListener("click", () => { const accordionContent = button.nextElementSibling; button.classList.toggle("accordion__button--active"); if (button.classList.contains("accordion__button--active")) { accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px'; } else { accordionContent.style.maxHeight = 0; } }); }); </script>

 .accordion__button { display: block; width: 100%; padding: 15px; border: none; outline: none; cursor: pointer; background: #333333; color: #ffffff; text-align: left; transition: background 0.2s; } .accordion__button::after { content: '\\25be'; float: right; transform: scale(1.5); } .accordion__button--active { background: #555555; } .accordion__button--active::after { content: '\\25be'; } .accordion__content { overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; font-family: sans-serif; background: #eeeeee; }

 <div class="accordion"> <button type="button" class="accordion__button">FUP Plans</button> <div class="accordion__content"> <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia </p> </div> </div>

 <script> document.querySelectorAll("accordion__button").forEach(button => { button.addEventListener("click", () => { const accordionContent = button.nextElementSibling; button.classList.toggle("accordion__button--active"); if (button.classList.contains("accordion__button--active")) { accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px'; } else { accordionContent.style.maxHeight = 0; } }); }); </script>

 .accordion__button { display: block; width: 100%; padding: 15px; border: none; outline: none; cursor: pointer; background: #333333; color: #ffffff; text-align: left; transition: background 0.2s; } .accordion__button::after { content: '\\25be'; float: right; transform: scale(1.5); } .accordion__button--active { background: #555555; } .accordion__button--active::after { content: '\\25be'; } .accordion__content { overflow: hidden; max-height: 0; transition: max-height 0.2s; padding: 0 15px; font-family: sans-serif; background: #eeeeee; }

 <div class="accordion"> <button type="button" class="accordion__button">FUP Plans</button> <div class="accordion__content" > <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia </p> </div> </div>

enter code here

Answer 1

The problem is with this modified line.

  document.querySelectorAll(".accordion__button").forEach(button => { ... });

just add the '.' character to define the classname of the element.