Accordion

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Accordion
  title="Question"
  open="false"
/>

Legacy mount name: data-component="Accordion".

Props and attributes

Slots

• default

Events

• click

Source contract

Installed source: components/Accordion.wrn

component Accordion {
    props {
        class = ""
        title = "Question"
        open = false
    }

    state expanded = open

    view {
        <div class="border-b border-slate-200 dark:border-slate-800 {class}" >
        <button
                type="button"
                class="flex w-full items-center justify-between gap-4 py-5 text-left font-semibold"
                aria-expanded="{expanded}"
                @click="expanded = !expanded"
            >
        <span >
                    {title}
                </span>
        <span class="text-xl transition-transform {expanded ? 'rotate-45' : ''}">+</span>
        </button>
        <div
                data-show="expanded"
                class="pb-5 text-slate-600 dark:text-slate-300"
            >
        <slot />
        </div>
        </div>
    }
}