Accordion - Kitchen Sink

Basic accordion

Bind the open state and render both snippets with the current open boolean.

Soft cotton jersey with a relaxed fit and ribbed neckline.

open = true

import { Accordion } from '@mediayard/agoratopia-ui/components/accordion';

let details_open = $state(true);

<Accordion bind:open={details_open}>
	{#snippet header(open)}
		<span>{open ? 'Hide' : 'Show'} product details</span>
	{/snippet}

	{#snippet content(open)}
		<p>Soft cotton jersey with a relaxed fit.</p>
		<p>open = {open}</p>
	{/snippet}
</Accordion>

Change callback

Use onchange when toggling should trigger side effects in addition to updating the bound state.

Last state: closed

let shipping_open = $state(false);
let last_state = $state('closed');

function trackAccordion(open: boolean) {
	last_state = open ? 'open' : 'closed';
}

<Accordion bind:open={shipping_open} onchange={trackAccordion}>
	{#snippet header(open)}
		<span>Shipping information ({open ? 'open' : 'closed'})</span>
	{/snippet}

	{#snippet content(open)}
		<p>Orders ship in 2-4 business days.</p>
		<p>open = {open}</p>
	{/snippet}
</Accordion>

Disabled

Disabled accordions keep the trigger focusable only according to native button behavior and do not toggle.

<Accordion disabled>
	{#snippet header()}
		<span>Unavailable offer</span>
	{/snippet}

	{#snippet content(open)}
		<p>This content cannot be expanded while disabled.</p>
		<p>open = {open}</p>
	{/snippet}
</Accordion>