Accordion

A collapsible component that is used to show and hide content.

Table of Contents

• Example
• Usage
• Keep Accordion Open

Example

Usage

<script>
    import Accordion from '$lib/dist/components/Accordion.svelte';
</script>

<div class="hs-accordion-group bg-base-200 p-4 divide-y divide-base-content/80">
  <Accordion title="Title One" content="Content One" />
  <Accordion title="Title Two" content="Content Two" />
  <Accordion title="Title Three" content="Content Three" />
</div>

Keep Accordion Open

In the above example only one accordion stays open at a time. To keep them open we need to add data-hs-accordion-always-open to the parent div

<script>
    import Accordion from '$lib/dist/components/Accordion.svelte';
</script>

<div class="hs-accordion-group bg-base-200 p-4 divide-y divide-base-content/80" data-hs-accordion-always-open>
  <Accordion title="Will this stay open?" content="Yes!" />
  <Accordion title="Title Two" content="Content Two" />
  <Accordion title="Title Three" content="Content Three" />
</div>

PrelineJs Reference: Accordion