Accordion

Accordion is used for showing and hiding content in collapsible sections. Only one section can be open at a time.

const { default: Accordion } = await import('/components/data-display/accordion.js');

const { tags, $ } = Lightview;

const faq = [
    { q: 'What is Lightview?', a: 'A lightweight reactive UI library.' },
    { q: 'Does it support TypeScript?', a: 'Yes! Full TypeScript support.' },
    { q: 'How do I get started?', a: 'Check out our Getting Started guide!' }
];

const accordion = Accordion({},
    ...faq.map((item, i) => 
        Accordion.Item({ name: 'faq', checked: i === 0 },
            Accordion.Title({}, item.q),
            Accordion.Content({}, item.a)
        )
    )
);

$('#demo').insert(accordion);

const { default: Accordion } = await import('/components/data-display/accordion.js');

const { tags, $ } = Lightview;

const sections = [
    { title: '📦 Shipping', content: 'Free shipping on orders over $50.' },
    { title: '🔄 Returns', content: '30-day return policy for unused items.' },
    { title: '💳 Payment', content: 'We accept all major credit cards.' }
];

const accordion = Accordion({ join: true },
    ...sections.map((item, i) => 
        Accordion.Item({ name: 'info', icon: 'plus', join: true, checked: i === 0 },
            Accordion.Title({}, item.title),
            Accordion.Content({}, item.content)
        )
    )
);

$('#demo').insert(accordion);

Props

Accordion.Item Props

Arrow Icon (Default)

Plus/Minus Icon