Accordion

<f:variable name="items" value="{
    0: { value: 'item-1', title: 'Product Information', content: 'Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.' },
    1: { value: 'item-2', title: 'Shipping Details', content: 'We offer worldwide shipping with various delivery options to suit your needs. Orders are processed within 24 hours and typically arrive within 5-10 business days.' },
    2: { value: 'item-3', title: 'Return Policy', content: 'We accept returns within 30 days of purchase. Items must be in original condition and packaging. Please contact our support team to initiate a return.' }
}" />

<ui:accordion.root class="w-full max-w-[400px]" defaultValue="{0: 'item-2'}">
    <f:for each="{items}" as="item">
        <ui:accordion.item value="{item.value}">
            <ui:accordion.itemTrigger>
                {item.title}
            </ui:accordion.itemTrigger>
            <ui:accordion.itemContent>
                {item.content}
            </ui:accordion.itemContent>
        </ui:accordion.item>
    </f:for>
</ui:accordion.root>

import { mount } from 'fluid-primitives';
import { Accordion } from 'fluid-primitives/accordion';

mount('accordion', ({ props }) => {
	const accordion = new Accordion(props);
	accordion.init();
	return accordion;
});

<ui:accordion.root multiple="{true}" class="w-full max-w-[400px]">
    <ui:accordion.item value="item-1">
        <ui:accordion.itemTrigger>First item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the first item.</ui:accordion.itemContent>
    </ui:accordion.item>
    <ui:accordion.item value="item-2">
        <ui:accordion.itemTrigger>Second item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the second item.</ui:accordion.itemContent>
    </ui:accordion.item>
    <ui:accordion.item value="item-3">
        <ui:accordion.itemTrigger>Third item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the third item.</ui:accordion.itemContent>
    </ui:accordion.item>
</ui:accordion.root>

<ui:accordion.root class="w-full max-w-[400px]">
    <ui:accordion.item value="item-1">
        <ui:accordion.itemTrigger>Enabled item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>Content for the enabled item.</ui:accordion.itemContent>
    </ui:accordion.item>
    <ui:accordion.item value="item-2" disabled="{true}">
        <ui:accordion.itemTrigger>Disabled item</ui:accordion.itemTrigger>
        <ui:accordion.itemContent>This content cannot be accessed.</ui:accordion.itemContent>
    </ui:accordion.item>
</ui:accordion.root>