hansui

Appearance

Accordion ​

Expands or collapses content sections to show or hide additional information.

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the accordion
  • Item: The container for each accordion item

Usage ​

To create a accordion, you can use the New function, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy as shown in the example above.

New function

templ
@accordion.New(id string, props ...*accordion.Props)
  • id - An unique string identifying the accordion instance.
  • props - A pointer to the accordion.Props struct that defines the configuration options for the accordion (see here).
templ
@accordion.New("demo") {
    @accordion.Item("Headline 1") {
        <p>Lorem ipsum dolor sit amet....</p>
    }
    @accordion.Item("Headline 2") {
        <p>Neque gravida in fermentum et...</p>
    }
}
Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

templ
@accordion.Builder("demo").WithKeepOpen(true).Render() {
    @accordion.Item("Headline 3") {
        <p>Lorem ipsum dolor sit amet....</p>
    }
    @accordion.Item("Headline 4") {
        <p>Neque gravida in fermentum et...</p>
    }
}
Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the accordion. Like in the Builder pattern, With methods customize the component by setting specific properties:

templ
@accordion.Render("demo",
    accordion.WithHoverable(true),
    accordion.WithFocusable(true),
) {
    @accordion.Item("Headline 5") {
        <p>Lorem ipsum dolor sit amet....</p>
    }
    @accordion.Item("Headline 6") {
        <p>Neque gravida in fermentum et...</p>
    }
}

Accordion Variants ​

Gruoped ​

A minimalist style with a transparent background and a colored border, offering a lightweight, elegant look.

view the code

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Isolated ​

Softly colored backgrounds with subtle borders, giving the accordions a delicate and subdued appearance.

view the code

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Lifted ​

Raised accordions with shadows that create a 3D effect, making them stand out from the background.

view the code

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Stacked ​

A bold, layered look with solid backgrounds and shadows, giving a sense of depth and structure.

view the code

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Brutalist ​

Flat, solid colors with sharp edges and no shadows, creating a strong, utilitarian design.

view the code

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Cyberpunk ​

Neon-colored accordions with glowing effects, evoking a futuristic, high-tech aesthetic.

view the code

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Retro ​

Muted colors with a vintage vibe, blending simplicity with nostalgic tones for a classic feel.

view the code

Lorem ipsum dolor sit amet....

Neque gravida in fermentum et...

Opening multiple items at once ​

Something here

Set initial opening state ​

Something here

React to hover interactions ​

Something here

React to item focused ​

Something here

API Reference ​

accordion.Props ​

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

Variant ​

Defines the style variant of the accordion.

  • type: string
  • default: grouped
  • values: grouped, isolated, lifted, stacked, cyberpunk, brutalist, retro

KeepOpen ​

If true, multiple accordion items can remain open simultaneously.

  • type: bool
  • default: false

Open ​

Specifies which accordion item should be open by default. Can be used to control initial state.

  • type: string

Hoverable ​

If true, the accordion item will react to hover interactions.

  • type: bool
  • default: false

Focusable ​

If true, the accordion item can be focused, allowing keyboard interaction or improved accessibility.

  • type: bool
  • default: false

Icon ​

Optional icon configuration for the accordion. Can be used to add visual indicators such as open/close icons.

  • type: *hansui.Icon

Attrs ​

Additional HTML attributes for the accordion element. Allows you to set custom attributes such as data attributes, ARIA roles or others.

  • type: templ.Attributes