Collapsible

An interactive component which expands/collapses a panel.

Source Tailwind CSS JavaScript

@axadrn starred 3 repositories

github.com/a-h/templ

github.com/charmbracelet/bubbletea

github.com/labstack/echo

package showcase

import "github.com/templui/templui/components/collapsible"
import "github.com/templui/templui/components/button"
import "github.com/templui/templui/components/icon"

templ CollapsibleDefault() {
	@collapsible.Collapsible(collapsible.Props{
		Class: "w-[350px] space-y-2",
	}) {
		<div class="flex items-center justify-between space-x-4 px-4">
			<h4 class="text-sm font-semibold">
				{ "@axadrn" } starred 3 repositories
			</h4>
			@collapsible.Trigger() {
				@button.Button(button.Props{
					Variant: button.VariantGhost,
					Size:    button.SizeIcon,
					Class:   "size-8",
				}) {
					@icon.ChevronsUpDown(icon.Props{Class: "size-4"})
					<span class="sr-only">Toggle</span>
				}
			}
		</div>
		<div class="rounded-md border px-4 py-2 font-mono text-sm">
			github.com/a-h/templ
		</div>
		@collapsible.Content(collapsible.ContentProps{
			Class: "space-y-2",
		}) {
			<div class="rounded-md border px-4 py-2 font-mono text-sm">
				github.com/charmbracelet/bubbletea
			</div>
			<div class="rounded-md border px-4 py-2 font-mono text-sm">
				github.com/labstack/echo
			</div>
		}
	}
}

Installation

templui add collapsible

Load the script once in your layout:

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

API Reference

Required parameter

Hover for description

Collapsible

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`

Trigger

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

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`	-

Menu

Getting Started

Components

Collapsible

@axadrn starred 3 repositories

Installation

API Reference

Collapsible

Trigger

Content