accordion

A list of collapsible items. Set name to allow only one open at a time.

Example

How often does it sync?
Every 15 minutes.
Can I pause a sync?
Yes, from the segment page.

Laravel

<x-admin::accordion name="g-faq">
    <x-admin::accordion-item title="How often does it sync?" open>Every 15 minutes.</x-admin::accordion-item>
    <x-admin::accordion-item title="Can I pause a sync?">Yes, from the segment page.</x-admin::accordion-item>
</x-admin::accordion>

Props

PropRequiredDefaultOptions
namenull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Accordion } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-accordion"><details class="adm-collapsible"  name="g-faq"   open >
    <summary><svg class="adm-icon adm-collapsible__chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>How often does it sync?</summary>
    <div class="adm-collapsible__content">Every 15 minutes.</div>
</details>
    <details class="adm-collapsible"  name="g-faq"  >
    <summary><svg class="adm-icon adm-collapsible__chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>Can I pause a sync?</summary>
    <div class="adm-collapsible__content">Yes, from the segment page.</div>
</details></div>