Louisette 0.8.2

Collapsible

The collapsible component provides a way to show and hide content.

WAI-ARIA: Disclosure Pattern

Features

Disabled state

The collapsible component supports a disabled state.

Once disabled, the collapsible cannot be interacted with.

Keyboard navigation

  • Space or Enter toggles the collapsible open or closed.
  • Escape closes the collapsible.

Example

Sources

+page.svelte

<script lang="ts">
  import Collapsible from './Collapsible.svelte'
</script>

<Collapsible heading="Paper" icon="🗞️">
  The invention of paper is attributed to ancient China, where it was first
  developed around 200 BCE. It was initially made from the fibers of mulberry
  trees. Paper is an incredibly versatile material that is used for various
  purposes, including writing, printing, packaging, and crafting. Paper
  production can have environmental implications, particularly when it involves
  deforestation and chemical-intensive processes. However, recycling paper helps
  reduce the demand for virgin materials and minimizes waste. Recycling paper is
  an essential practice to conserve resources. It helps save trees, reduce
  energy consumption, and minimize waste in landfills.
</Collapsible>

Collapsible.svelte

<script lang="ts">
  import { createCollapsible } from 'louisette'

  export let icon: string = ''
  export let heading: string

  const { triggerAttrs, contentAttrs, expanded } = createCollapsible()
</script>

<div
  class="max-w-xl rounded-lg border border-neutral-200 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
>
  <div
    class="space-between flex items-center rounded-lg p-4 font-semibold transition-colors hover:bg-neutral-100 focus:outline-none focus-visible:bg-neutral-100 focus-visible:ring focus-visible:ring-accent-500 focus-visible:ring-opacity-50 dark:hover:bg-neutral-700 dark:focus-visible:bg-neutral-700"
    {...$triggerAttrs}
  >
    {#if icon}
      <span class="mr-2" aria-hidden="true">{icon}</span>
    {/if}
    {heading}
    <span class="ml-auto" class:rotate-180={$expanded}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19.5 8.25l-7.5 7.5-7.5-7.5"
        />
      </svg>
    </span>
  </div>
  <div class="p-4 text-sm" class:hidden={!$expanded} {...$contentAttrs}>
    <slot />
  </div>
</div>