Accordion

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

Goshtoso Component

Go + Templ

Default

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.

No Background

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

The content area maintains proper spacing and typography.

Allow Multiple Open

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

This provides a different user experience for certain use cases.

Server-Loaded Content (HTMX)

Content loads from server when section is expanded

Loading content...

Usage Example

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

// Multiple open items
@accordion.Accordion(accordion.AccordionConfig{
    AllowMultiple: true,
    Items: []accordion.AccordionItem{
        {ID: "item1", Title: "Section 1", Content: content1},
        {ID: "item2", Title: "Section 2", Content: content2},
    },
})

// No background variant
@accordion.Accordion(accordion.AccordionConfig{
    Variant: accordion.NoBackground,
    Items:   items,
})

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

// lazyLoadingContent template
templ lazyLoadingContent(targetID string) {
    <div id={ targetID } 
         hx-get={ "/api/components/accordion-content/" + targetID }
         hx-trigger="intersect once"
         hx-swap="innerHTML">
        <div class="flex items-center gap-2">
            <span>Loading...</span>
        </div>
    </div>
}

Avatar