Collapse

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

Basic Example

Independent collapse sections 

await import('/components/data-display/collapse.js');
const { tags, $ } = Lightview;
const { div, p, Collapse } = tags;

const demo = div({ style: 'display: flex; flex-direction: column; gap: 0.5rem' },
    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.')
        )
    )
);

$('#example').content(demo);
await import('/components/data-display/collapse.js');
const { $, tags } = Lightview;
const { Collapse, div, p } = tags;

const demo = {
    tag: div,
    attributes: { style: 'display: flex; flex-direction: column; gap: 0.5rem' },
    children: [
        {
            tag: Collapse,
            attributes: { icon: 'arrow' },
            children: [
                { tag: Collapse.Title, children: ['📖 Description'] },
                { tag: Collapse.Content, children: [{ tag: p, children: ['This is a detailed product description that can be expanded.'] }] }
            ]
        },
        {
            tag: Collapse,
            attributes: { icon: 'arrow' },
            children: [
                { tag: Collapse.Title, children: ['📦 Shipping Info'] },
                { tag: Collapse.Content, children: [{ tag: p, children: ['Free shipping on orders over $50. Delivery in 3-5 days.'] }] }
            ]
        },
        {
            tag: Collapse,
            attributes: { icon: 'arrow' },
            children: [
                { tag: Collapse.Title, children: ['🔄 Returns'] },
                { tag: Collapse.Content, children: [{ tag: p, children: ['30-day return policy for unused items in original packaging.'] }] }
            ]
        }
    ]
};

$('#example').content(demo);
await import('/components/data-display/collapse.js');
const { $ } = Lightview;

const demo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 0.5rem',
        children: [
            {
                Collapse: {
                    icon: 'arrow',
                    children: [
                        { 'Collapse.Title': { children: ['📖 Description'] } },
                        { 'Collapse.Content': { children: [{ p: { children: ['This is a detailed product description that can be expanded.'] } }] } }
                    ]
                }
            },
            {
                Collapse: {
                    icon: 'arrow',
                    children: [
                        { 'Collapse.Title': { children: ['📦 Shipping Info'] } },
                        { 'Collapse.Content': { children: [{ p: { children: ['Free shipping on orders over $50. Delivery in 3-5 days.'] } }] } }
                    ]
                }
            },
            {
                Collapse: {
                    icon: 'arrow',
                    children: [
                        { 'Collapse.Title': { children: ['🔄 Returns'] } },
                        { 'Collapse.Content': { children: [{ p: { children: ['30-day return policy for unused items in original packaging.'] } }] } }
                    ]
                }
            }
        ]
    }
};

$('#example').content(demo);

Initially Open

Collapse with open prop

await import('/components/data-display/collapse.js');
const { tags, $ } = Lightview;
const { div, p, ul, li, Collapse } = tags;

const demo = div({ style: 'display: flex; flex-direction: column; gap: 0.5rem' },
    Collapse({ icon: 'plus', open: true },
        Collapse.Title({}, '🎁 What\'s included'),
        Collapse.Content({}, 
            ul({ style: 'list-style-type: disc; padding-left: 1rem;' },
                li({}, 'Premium headphones'),
                li({}, 'Carrying case'),
                li({}, '3.5mm audio cable'),
                li({}, 'User manual')
            )
        )
    ),
    Collapse({ icon: 'plus' },
        Collapse.Title({}, '⚡ Specifications'),
        Collapse.Content({}, 
            ul({ style: 'list-style-type: disc; padding-left: 1rem;' },
                li({}, 'Driver size: 40mm'),
                li({}, 'Battery: 30h playtime'),
                li({}, 'Bluetooth 5.0')
            )
        )
    )
);

$('#example').content(demo);
await import('/components/data-display/collapse.js');
const { $, tags } = Lightview;
const { Collapse, div, ul, li } = tags;

const demo = {
    tag: div,
    attributes: { style: 'display: flex; flex-direction: column; gap: 0.5rem' },
    children: [
        {
            tag: Collapse,
            attributes: { icon: 'plus', open: true },
            children: [
                { tag: Collapse.Title, children: ['🎁 What\'s included'] },
                {
                    tag: Collapse.Content,
                    children: [{
                        tag: ul,
                        attributes: { style: 'list-style-type: disc; padding-left: 1rem;' },
                        children: [
                            { tag: li, children: ['Premium headphones'] },
                            { tag: li, children: ['Carrying case'] },
                            { tag: li, children: ['3.5mm audio cable'] },
                            { tag: li, children: ['User manual'] }
                        ]
                    }]
                }
            ]
        },
        {
            tag: Collapse,
            attributes: { icon: 'plus' },
            children: [
                { tag: Collapse.Title, children: ['⚡ Specifications'] },
                {
                    tag: Collapse.Content,
                    children: [{
                        tag: ul,
                        attributes: { style: 'list-style-type: disc; padding-left: 1rem;' },
                        children: [
                            { tag: li, children: ['Driver size: 40mm'] },
                            { tag: li, children: ['Battery: 30h playtime'] },
                            { tag: li, children: ['Bluetooth 5.0'] }
                        ]
                    }]
                }
            ]
        }
    ]
};

$('#example').content(demo);
await import('/components/data-display/collapse.js');
const { $ } = Lightview;

const demo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 0.5rem',
        children: [
            {
                Collapse: {
                    icon: 'plus',
                    open: true,
                    children: [
                        { 'Collapse.Title': { children: ['🎁 What\'s included'] } },
                        {
                            'Collapse.Content': {
                                children: [{
                                    ul: {
                                        style: 'list-style-type: disc; padding-left: 1rem;',
                                        children: [
                                            { li: { children: ['Premium headphones'] } },
                                            { li: { children: ['Carrying case'] } },
                                            { li: { children: ['3.5mm audio cable'] } },
                                            { li: { children: ['User manual'] } }
                                        ]
                                    }
                                }]
                            }
                        }
                    ]
                }
            },
            {
                Collapse: {
                    icon: 'plus',
                    children: [
                        { 'Collapse.Title': { children: ['⚡ Specifications'] } },
                        {
                            'Collapse.Content': {
                                children: [{
                                    ul: {
                                        style: 'list-style-type: disc; padding-left: 1rem;',
                                        children: [
                                            { li: { children: ['Driver size: 40mm'] } },
                                            { li: { children: ['Battery: 30h playtime'] } },
                                            { li: { children: ['Bluetooth 5.0'] } }
                                        ]
                                    }
                                }]
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(demo);

Props

Prop Type Default Description
icon string 'arrow' 'arrow' | 'plus'
open boolean false Initially open
focus boolean false Open on focus (accessibility)

Sub-components

Component Description
Collapse.Title Clickable header area
Collapse.Content Hidden content container

Arrow Icon

Click to open/close

This content is hidden by default.

Plus/Minus Icon

Click to expand

Expanded content here.

Force Open

I am always open

This collapse is forced open with collapse-open.