Accordions

 <section>
        <h2>Accordion using details</h2>
        <details open>
            <summary>JORDAN DUNNING</summary>
            No.1 ‘keeper, Jordan had a sensational 2023-24 season with 8 clean sheets 
and a number of top performances which contributed to making the team so 
hard to beat Jordan dominates his area and makes collecting balls into the box 
look effortless. His massive kicks have also been known to catch a few teams out
        </details>
        <details>
            <summary>CAMERON TARR</summary>
             No.1 ‘keeper, Jordan had a sensational 2023-24 season with 8 clean sheets 
and a number of top performances which contributed to making the team so 
hard to beat Jordan dominates his area and makes collecting balls into the box 
look effortless. His massive kicks have also been known to catch a few teams out<a href="https://youtube.com/@eamonncottrell">YouTube</a> videos and writes articles on freeCodeCamp, <a href="https://www.linkedin.com/in/eamonncottrell/">LinkedIn</a> and his <a href="https://got-sheet.beehiiv.com/">personal newsletter</a>.
        </details>
        <details>
            <summary>DREW SAWDON</summary>
             No.1 ‘keeper, Jordan had a sensational 2023-24 season with 8 clean sheets 
and a number of top performances which contributed to making the team so 
hard to beat Jordan dominates his area and makes collecting balls into the box 
look effortless. His massive kicks have also been known to catch a few teams out
        </details>
    </section>


    <!-- With JavaScript -->
    <section>
        <h2>Accordion with some JavaScript added</h2>
        <details  open>
            <summary class="withJS">What's the difference?</summary>
            We're adding JavaScript to these three.
        </details>
        <details >
            <summary class="withJS">Why add JavaScript?</summary>
            We can make it so only one panel can be open at a time.
        </details>
        <details >
            <summary class="withJS">Try clicking each of these</summary>
            See how one closes as soon as the other opens?.
        </details>
    </section>

    <script>
        const summaries = document.querySelectorAll(`.withJS`)
        summaries.forEach(e=>{
            e.addEventListener('click',openCloseDetails)
        })

        function openCloseDetails(){
            summaries.forEach(e =>{
                let details = e.parentNode;
                if(details != this.parentNode){
                details.removeAttribute('open')
            }
            })
        }
    </script>
</body>
</html>