I am facing an issue related to the toggle which I want, when I click on any arrow btn, only the clicked btn summary will display. I have tried a lot but am still on the problem side. I have used opacity: 0; instead of display: none; for a paragraph. Sorry! I am in a learning zone and working on some small projects. Thanks for your support.

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