单击箭头按钮时如何切换（开/关）夏季

Question

我面临着与我想要的切换有关的问题，当我单击任何箭头BTN时，只有单击的BTN摘要将显示。我尝试了很多，但仍处于问题方面。我使用了不透明度：0;而不是显示：无；段落。对不起！我在学习区并从事一些小型项目。感谢您的支持。

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

Answer 1

您为什么不使用＆lt;详细信息＆gt;标签？

 <section>
                    <div class="content">
                        <h3>How does it work?</h3>
                        <i id="uparrow" class="fa fa-angle-up"></i>
                    </div>
                    <details id="para">
                    <summary>Click me</summary>
                    <p>                    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>
                    </details>
                </section>
                <section>...</section>
                <section>...</section>
                <section>...</section>