Skip to Content

Details

Source

Does it work without JavaScript?
Yes.

Description

Displays a details element with helpful defaults and transitions. Can be used to make an accordion, or a collapse.

props

  • class
  • id
  • open
  • transition - slides the content, set to false to remove

slots

name purpose default value slot props
summary summary element contents empty open
content contents when details is open empty none

example

<script lang="ts">
    import { Details } from "drab";
    import Chevron from "$site/svg/Chevron.svelte";
</script>

<Details class="border-b">
    <svelte:fragment slot="summary" let:open>
        <div class="link flex items-center justify-between gap-8 p-4">
            <div>Does it work without JavaScript?</div>
            <div class="transition" class:rotate-180={open}>
                <Chevron />
            </div>
        </div>
    </svelte:fragment>
    <svelte:fragment slot="content">
        <div class="px-4 pb-4">Yes.</div>
    </svelte:fragment>
</Details>