<h4>Multi-expand</h4>

<fluent-accordion style="max-width: 350px;">

  <fluent-accordion-item>

    <span slot="heading">Item 1</span>

    <div class="panel">

      Panel one content

    </div>

  </fluent-accordion-item>

  <fluent-accordion-item>

    <span slot="heading">Item 2</span>

    <div class="panel">

      Panel 2 content

    </div>

  </fluent-accordion-item>

  <fluent-accordion-item>

    <span slot="heading">Item 3</span>

    <div class="panel">

      Panel 3 content

    </div>

  </fluent-accordion-item>

</fluent-accordion>

<h4>Single-expand</h4>

<fluent-accordion expand-mode="single">

  <fluent-accordion-item>

    <span slot="heading">Item 1</span>

    <div class="panel">

      Panel one content

    </div>

  </fluent-accordion-item>

  <fluent-accordion-item>

    <span slot="heading">Item 2</span>

    <div class="panel">

      Panel 2 content

    </div>

  </fluent-accordion-item>

  <fluent-accordion-item>

    <span slot="heading">Item 3</span>

    <div class="panel">

      Panel 3 content

    </div>

  </fluent-accordion-item>

  <fluent-accordion-item>

    <span slot="heading">Item 4</span>

    <div class="panel">

      Panel 4 content

    </div>

  </fluent-accordion-item>

</fluent-accordion>