Variant

Use the variant prop to change the visual style of the accordion.

Preview

contained

index: 0

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

outlined

index: 1

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

text

index: 2

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

Code

<script lang="ts">
  import { Constants } from "@fefade/core"
  import { Accordion } from "@fefade/svelte"
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  {#each Constants.variants as variant, i (variant)}
    <Accordion id="sec{i}" {variant} label={variant}>
      <div style="line-height: 1.5;">
        <strong>index: {i}</strong>
        <p>
          Id provident praesentium, incidunt, quisquam ullam numquam aliquid
          dolorem, quae labore dignissimos minima assumenda. Reprehenderit
          nostrum minima perferendis eos quisquam ipsa quo!
        </p>
      </div>
    </Accordion>
  {/each}
</div>

Auto Focus

Use the autofocus prop to automatically expand a specific accordion item on load.

Preview

Auto Focus

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae a minus accusantium perspiciatis numquam fugiat officiis esse fugit consectetur vero natus accusamus autem quos, voluptate dignissimos deserunt nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

Code

<script lang="ts">
  import { Accordion } from "@fefade/svelte"
</script>

<Accordion id="autofocus" label="Auto Focus" autofocus>
  <div style="line-height: 1.5;">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae
      a minus accusantium perspiciatis numquam fugiat officiis esse fugit
      consectetur vero natus accusamus autem quos, voluptate dignissimos
      deserunt nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing
      elit.
    </p>

    <p>
      Id provident praesentium, incidunt, quisquam ullam numquam aliquid
      dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum
      minima perferendis eos quisquam ipsa quo!
    </p>
  </div>
</Accordion>

Disabled

Use the disabled prop to prevent user interaction with specific accordion items.

Preview

Disabled

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae a minus accusantium perspiciatis numquam fugiat officiis esse fugit consectetur vero natus accusamus autem quos, voluptate dignissimos deserunt nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Code

<script lang="ts">
  import { Accordion } from "@fefade/svelte"
</script>

<Accordion id="disabled" label="Disabled" disabled>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae a
    minus accusantium perspiciatis numquam fugiat officiis esse fugit
    consectetur vero natus accusamus autem quos, voluptate dignissimos deserunt
    nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </p>
</Accordion>