Me enfrento a un problema relacionado con el conmutador que quiero, cuando hago clic en cualquier botón de flecha, solo se mostrará el resumen de botón en el que se hizo clic. He intentado mucho, pero todavía estoy en el lado del problema. He usado opacidad: 0; en lugar de mostrar: ninguno; por un párrafo. ¡Lo siento! Estoy en una zona de aprendizaje y trabajando en algunos proyectos pequeños. Gracias por su apoyo.

 <section> <div class="content"> <h3>How does it work?</h3> <i id="uparrow" class="fa fa-angle-up"></i> </div> <p id="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi provident ut sed eaque earum commodi consectetur iandae magnam nostrum gendi veniam voluptate beatae. Non soluta reprehenderit quas dicta?</p> </section> <section>...</section> <section>...</section> <section>...</section> <script> const arrow = document.querySelectorAll('#uparrow'); const para = document.querySelectorAll('#para'); const content = document.getElementsByClassName('content'); for(let i=0; i<arrow.length; i++){ arrow.addEventListener('click',()=>{ closeAll(); openQuest(i); }) } function openQuest(i){ para[i].style.opacity = '1'; para[i].style.maxHeight = '10rem'; arrow[i].style.transform = 'rotateX(180deg)'; } function closeAll(){ for(let i=0; i<content.length; i++){ arrow[i].style.transform = 'rotateX(0deg)'; para[i].style.maxHeight = '0rem'; para[i].style.opacity = '0'; } } </script>