Collapsible

An interactive component which expands/collapses a panel.

Source Tailwind CSS JavaScript

github.com/a-h/templ

github.com/charmbracelet/bubbletea

github.com/labstack/echo

Installation

templui add collapsible

Load the script once in your layout:

<head> @collapsible.Script() </head>

Required parameter

Hover for description

Root container for collapsible content. Controls the open/closed state.

Name	Type	Default
`ID` Unique identifier for the collapsible. Auto-generated if not provided.	`string`	`auto-generated`
`Class` Additional CSS classes to apply to the collapsible.	`string`	-
`Attributes` Additional HTML attributes to apply to the collapsible element.	`templ.Attributes`	-
`Open` Whether the collapsible is initially open.	`bool`	`false`

Button that toggles the collapsible content. Automatically handles click events and keyboard navigation.

Name	Type	Default
`ID` Unique identifier for the trigger button.	`string`	-
`Class` Additional CSS classes to apply to the trigger button.	`string`	-
`Attributes` Additional HTML attributes to apply to the trigger button.	`templ.Attributes`	-

Content that expands and collapses. Uses smooth height transitions for animations.

Name	Type	Default
`ID` Unique identifier for the content element.	`string`	-
`Class` Additional CSS classes to apply to the content container.	`string`	-
`Attributes` Additional HTML attributes to apply to the content element.	`templ.Attributes`	-