Accordion

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content when clicked.

Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our documentation for additional information.

Reach out to our dedicated support team via email at support@example.com or call our toll-free number at 1-800-123-4567 during business hours.

Please refer to our refund policy page on the website for detailed information regarding eligibility, timeframes, and the process for requesting a refund.

Usage Example

@accordion.Accordion(accordion.AccordionConfig{
    Items: []accordion.AccordionItem{
        {
            ID:      "default-1",
            Title:   "What browsers are supported?",
            Content: templ.Raw("Our website is optimized for Chrome, Firefox, Safari, and Edge."),
        },
        {
            ID:      "default-2",
            Title:   "How can I contact customer support?",
            Content: templ.Raw("Reach out via email at support@example.com."),
        },
    },
})

No Background

Drops the tinted fill for a cleaner look on plain surfaces. Set Variant: accordion.NoBackground.

This accordion variant has no background styling for a cleaner look.

The content area maintains proper spacing and typography.

No Background

@accordion.Accordion(accordion.AccordionConfig{
    Variant: accordion.NoBackground,
    Items: []accordion.AccordionItem{
        {ID: "nobg-1", Title: "First section without background", Content: content1},
        {ID: "nobg-2", Title: "Second section", Content: content2},
    },
})

Split

Each section becomes its own gapped, bordered card instead of a single divided block. Set Variant: accordion.Split.

Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge.

Reach out to our dedicated support team via email at support@example.com during business hours.

Refer to our refund policy page for eligibility, timeframes, and the request process.

Split

@accordion.Accordion(accordion.AccordionConfig{
    Variant:       accordion.Split,
    AllowMultiple: true,
    Items: []accordion.AccordionItem{
        {ID: "split-1", Title: "What browsers are supported?", Content: content1},
        {ID: "split-2", Title: "How can I contact customer support?", Content: content2},
    },
})

Allow Multiple Open

With AllowMultiple: true, several sections can stay expanded at the same time instead of collapsing each other.

With AllowMultiple: true, you can have multiple sections expanded simultaneously.

This provides a different user experience for certain use cases.

Allow Multiple Open

@accordion.Accordion(accordion.AccordionConfig{
    AllowMultiple: true,
    Items: []accordion.AccordionItem{
        {ID: "multi-1", Title: "Section A (can stay open)", Content: content1},
        {ID: "multi-2", Title: "Section B (can also stay open)", Content: content2},
    },
})

Server-Loaded Content (HTMX)

Defer heavy content: the body fetches from the server when the section scrolls into view (hx-trigger="intersect once").

Loading content...

Server-Loaded Content (HTMX)

// Content template fetches from the server on first reveal
templ lazyLoadingContent(targetID string) {
    <div id={ targetID }
         hx-get={ "/api/components/accordion-content/" + targetID }
         hx-trigger="intersect once"
         hx-swap="innerHTML">
        <span>Loading...</span>
    </div>
}

@accordion.Accordion(accordion.AccordionConfig{
    Items: []accordion.AccordionItem{
        {ID: "lazy-1", Title: "Dynamic Content (click to load)", Content: lazyLoadingContent("lazy-content-a")},
    },
})

API Reference

Prop	Type	Default	Description
`Items`	`[]AccordionItem`	`nil`	The accordion sections (ID, Title, Content, optional Icon/Disabled/InitiallyExpanded).
`AllowMultiple`	`bool`	`false`	Allow multiple sections open at once. When false, opening one closes the others.
`Variant`	`Variant`	`Default`	Visual style: "default", "no-background", or "split".
`ID`	`string`	`"accordion"`	Container element ID used for accessibility wiring.
`RootClass`	`string`	`""`	Extra CSS classes appended to the container.

Avatar