32 lines
873 B
Plaintext
32 lines
873 B
Plaintext
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>
|
|
}
|
|
}
|