Ship faster with goilerplate templUI Pro

Accordion

Vertically stacked interactive sections to organize content.

Source Tailwind CSS

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that matches the other components aesthetic.
Is it animated?
Yes. It is animated by default, but you can disable it if you prefer.

Installation

templui add accordion

API Reference

Required parameter
Hover for description

Accordion

The main accordion container component.

Name Type Default
ID

Unique identifier for the accordion element.

string
-
Class

Additional CSS classes to apply to the accordion.

string
-
Attributes

Additional HTML attributes to apply to the accordion element.

templ.Attributes
-

Item

Individual accordion item container.

Name Type Default
ID

Unique identifier for the item element.

string
-
Class

Additional CSS classes to apply to the item.

string
-
Attributes

Additional HTML attributes to apply to the item element.

templ.Attributes
-

Trigger

Clickable trigger element that toggles the accordion item.

Name Type Default
ID

Unique identifier for the trigger element.

string
-
Class

Additional CSS classes to apply to the trigger.

string
-
Attributes

Additional HTML attributes to apply to the trigger element.

templ.Attributes
-

Content

Collapsible content area of the accordion item.

Name Type Default
ID

Unique identifier for the content element.

string
-
Class

Additional CSS classes to apply to the content.

string
-
Attributes

Additional HTML attributes to apply to the content element.

templ.Attributes
-
Axel Adrian