Back

Accordion

FAQ Accordion (Single Open)

mljr-ui is a Go component library built on templ, Alpine.js, and a clay-morphism design system. It provides ready-to-use UI primitives that work seamlessly with HTMX-powered backends.

No. All components render server-side via Go templates. The only client-side dependency is Alpine.js for interactive behaviour — no bundler needed.

Yes. Every component accepts a Class prop that appends to the default classes, and the design tokens are driven by CSS custom properties you can override per-page or globally.

Multiple Open

Opening one item does not close others.

First section content.
Second section content.
Third section content.

Variants

Flat

Content 1
Content 2

Bordered

Content 1
Content 2

Nested Accordions

Organise complex hierarchical data with multiple levels.

Content for parent section 1.

Detailed content for 1.1.
Detailed content for 1.2.
Content for parent section 2.

Usage

@data.Accordion(data.AccordionProps{
    InitialItem:   "item1",
    AllowMultiple: true,    // don't close others on open
    Variant:       "default", // "default" | "flat" | "bordered"
}) {
    @data.AccordionItem(data.AccordionItemProps{
        ID:    "item1",
        Title: "Label",
        Icon:  myIcon(),
    }) {
        Content
    }
}