Collapse

Collapse is used for showing and hiding content. Unlike Accordion, multiple collapses can be open simultaneously.

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

const { tags, $ } = Lightview;
const { div, p } = tags;

const demo = div({ class: 'space-y-2' },
    Collapse({ icon: 'arrow' },
        Collapse.Title({}, '📖 Description'),
        Collapse.Content({}, 
            p({}, 'This is a detailed product description that can be expanded.')
        )
    ),
    Collapse({ icon: 'arrow' },
        Collapse.Title({}, '📦 Shipping Info'),
        Collapse.Content({}, 
            p({}, 'Free shipping on orders over $50. Delivery in 3-5 days.')
        )
    ),
    Collapse({ icon: 'arrow' },
        Collapse.Title({}, '🔄 Returns'),
        Collapse.Content({}, 
            p({}, '30-day return policy for unused items in original packaging.')
        )
    )
);

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

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

const { tags, $ } = Lightview;
const { div, p, ul, li } = tags;

const demo = div({ class: 'space-y-2' },
    Collapse({ icon: 'plus', open: true },
        Collapse.Title({}, '🎁 What\'s included'),
        Collapse.Content({}, 
            ul({ class: 'list-disc pl-4' },
                li({}, 'Premium headphones'),
                li({}, 'Carrying case'),
                li({}, '3.5mm audio cable'),
                li({}, 'User manual')
            )
        )
    ),
    Collapse({ icon: 'plus' },
        Collapse.Title({}, '⚡ Specifications'),
        Collapse.Content({}, 
            ul({ class: 'list-disc pl-4' },
                li({}, 'Driver size: 40mm'),
                li({}, 'Battery: 30h playtime'),
                li({}, 'Bluetooth 5.0')
            )
        )
    )
);

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

Props

Sub-components

Arrow Icon

Plus/Minus Icon

Force Open