Open one accordion section at a time. (Svelte)

I'd like to ask someone who can figure out how to allow this accordion component to open only one section at a time.

It means that if a new accordion is open the previous one has to close automatically.

In the ideal situation, this function could be optional for specific accordions.

Thank you for your time.

Accordion.svelte

 <script>
    import { linear } from 'svelte/easing';
    import { slide} from 'svelte/transition';
    
    export let open = false;

    function handleClick() {
        open = !open
    } 
    
</script>

   <div  class="accordion">
      <div class="header" on:click={handleClick}>
          <div class="text">
              <slot name="head"></slot> 
          </div>
      </div>

      {#if open}
      <div class="details" transition:slide="" >
          <slot name="details">
          </slot>
      </div>
      {/if}

  </div>

<style>
       div.accordion {
          margin: 1rem 0;
      }
      
      div.header {
          display:flex;
          width:100%;
      }
      
      div.header .text {
          flex: 1;
      }
      
      div.details {
          background-color: transparent;
          padding:1rem;
      }
  </style>

app.svelte

<script>

import Accordion from "./Accordion.svelte"

</script>

       <Accordion>
          <div slot="head">
              <h2>Test one</h2>
          </div>
          <div slot="details">
              <ul>
                <Accordion>
                    <div slot="head">
                      <h4>The test of subitem?</h4>
                    </div>
                    <div slot="details">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </div>
                </Accordion >

                <Accordion>
                    <div slot="head">
                        <h4>Test of subitem 2</h4>
                    </div>
                    <div slot="details">
                        <li>one</li>
                        <li>two</li>
                        <li>three</li>
                    </div>
                </Accordion>
              </ul>
          </div>
       </Accordion>

       <Accordion>
          <div slot="head">
              <h4>Second test</h4>
          </div>
          <div slot="details">
              <ul>
                  <li>again one</li>
                  <li>two again</li>
                  <li>three repeat</li>
              </ul>
          </div>
        </Accordion>


<style>
li {
    margin: 0;
    padding: 1em;
    text-align: left;
    list-style-type: none;
    cursor: pointer;
    color: black;
}

h4, h2 {
        cursor: pointer;
}
</style>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/lx4YVC6