Accordion

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

Default Rendered example

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 [email protected] 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 [email protected]."),
        },
    },
})

No Background

Drops the tinted fill for a cleaner look on plain surfaces. Set Appearance: accordion.AppearancePlain.

No Background Rendered example

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{
    Appearance: accordion.AppearancePlain,
    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 Appearance: accordion.AppearanceSplit.

Split Rendered example

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

Reach out to our dedicated support team via email at [email protected] during business hours.

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

Split

@accordion.Accordion(accordion.AccordionConfig{
    Appearance:    accordion.AppearanceSplit,
    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.

Allow Multiple Open Rendered example

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").

Server-Loaded Content (HTMX) Rendered example

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")},
    },
})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/accordion

Open v0.2.7 API

Skeleton Avatar