templUI Pro coming soon  

50% OFF Join Waitlist

Accordion

Vertically stacked interactive sections to organize content.

Source
TailwindCSS

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
string
-
Class
string
-
Attributes
templ.Attributes
-

Item

Individual accordion item container.

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-

Trigger

Clickable trigger element that toggles the accordion item.

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-

Content

Collapsible content area of the accordion item.

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-