Collapsible

An interactive component which expands/collapses a panel.

Order #4189

Status Shipped

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/collapsible"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ CollapsibleDemo() {	@collapsible.Collapsible(collapsible.Props{Class: "flex w-[350px] flex-col gap-2"}) {		<div class="flex items-center justify-between gap-4 px-4">			<h4 class="text-sm font-semibold">Order #4189</h4>			@button.Button(button.Props{				Variant:    button.VariantGhost,				Size:       button.SizeIcon,				Class:      "size-8",				Attributes: collapsible.Trigger(ctx),			}) {				@icon.ChevronsUpDown()				<span class="sr-only">Toggle details</span>			}		</div>		<div class="flex items-center justify-between rounded-md border px-4 py-2 text-sm">			<span class="text-muted-foreground">Status</span>			<span class="font-medium">Shipped</span>		</div>		@collapsible.Content(collapsible.ContentProps{Class: "flex flex-col gap-2"}) {			<div class="rounded-md border px-4 py-2 text-sm">				<p class="font-medium">Shipping address</p>				<p class="text-muted-foreground">100 Market St, San Francisco</p>			</div>			<div class="rounded-md border px-4 py-2 text-sm">				<p class="font-medium">Items</p>				<p class="text-muted-foreground">2x Studio Headphones</p>			</div>		}	}}

Installation

shadcn-templ add collapsible

Copy and paste the following code into your project.

components/collapsible/collapsible.templ

package collapsible import (	"context" 	"github.com/axadrn/shadcn-templ/v2/utils") type ctxKey string const stateKey ctxKey = "collapsibleState" type ctxState struct {	id   string	open bool} func state(ctx context.Context) ctxState {	if s, ok := ctx.Value(stateKey).(ctxState); ok {		return s	}	return ctxState{}} type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Open renders the collapsible expanded on page load.	Open bool} type ContentProps struct {	Class      string	Attributes templ.Attributes} // Collapsible links Trigger and Content via ctx and carries the open state// (data-open/data-closed, like Base UI).templ Collapsible(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	{{ ctx = context.WithValue(ctx, stateKey, ctxState{id: p.ID, open: p.Open}) }}	<div		data-slot="collapsible"		data-tui-collapsible		data-open?={ p.Open }		data-closed?={ !p.Open }		class={ utils.CN("", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} // Trigger returns the attributes that turn any element (usually a button)// into the collapsible trigger — the asChild equivalent: no wrapper element.func Trigger(ctx context.Context) templ.Attributes {	s := state(ctx)	attrs := templ.Attributes{		"data-slot":                    "collapsible-trigger",		"data-tui-collapsible-trigger": true,		"aria-controls":                s.id,		"aria-expanded":                utils.IfElse(s.open, "true", "false"),	}	if s.open {		attrs["data-panel-open"] = true	}	return attrs} // Content is the collapsible panel: hidden while closed, unstyled like// Base UI. Its measured height is exposed as// --tui-collapsible-panel-height for custom animations.templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ s := state(ctx) }}	<div		id={ s.id }		data-slot="collapsible-content"		data-tui-collapsible-content		data-open?={ s.open }		data-closed?={ !s.open }		hidden?={ !s.open }		class={ utils.CN("", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>}

components/collapsible/collapsible.js

(function () {  "use strict";   function panelFor(trigger) {    return document.getElementById(trigger.getAttribute("aria-controls") || "");  }   function setOpen(el, isOpen) {    el.toggleAttribute("data-open", isOpen);    el.toggleAttribute("data-closed", !isOpen);  }   // Exposes the measured panel height, like Base UI's  // --collapsible-panel-height, so consumers can animate it.  function measure(panel) {    panel.style.setProperty("--tui-collapsible-panel-height", panel.scrollHeight + "px");  }   function toggle(trigger) {    const panel = panelFor(trigger);    if (!panel) return;    const root = panel.closest("[data-tui-collapsible]");    const isOpen = !panel.hasAttribute("data-open");     panel.hidden = !isOpen;    setOpen(panel, isOpen);    if (root) setOpen(root, isOpen);    trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");    trigger.toggleAttribute("data-panel-open", isOpen);    if (isOpen) measure(panel);  }   document.addEventListener("click", (e) => {    if (!(e.target instanceof Element)) return;    const trigger = e.target.closest("[data-tui-collapsible-trigger]");    if (trigger) toggle(trigger);  });})();

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/collapsible"

@collapsible.Collapsible() {	@button.Button(button.Props{Attributes: collapsible.Trigger(ctx)}) {		Can I use this in my project?	}	@collapsible.Content() {		Yes. Free to use for personal and commercial projects. No attribution required.	}}

Composition

Use the following composition to build a Collapsible:

collapsible.Collapsible├── collapsible.Trigger└── collapsible.Content

Open State

Use the Open prop to render the collapsible expanded initially.

@collapsible.Collapsible(collapsible.Props{Open: true}) {	@button.Button(button.Props{Attributes: collapsible.Trigger(ctx)}) {		Toggle	}	@collapsible.Content() {		Content	}}

Basic

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/card"	"github.com/axadrn/shadcn-templ/v2/components/collapsible"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ CollapsibleBasic() {	@card.Card(card.Props{Class: "mx-auto w-full max-w-sm"}) {		@card.Content() {			@collapsible.Collapsible(collapsible.Props{Class: "rounded-md data-open:bg-muted"}) {				@button.Button(button.Props{					Variant:    button.VariantGhost,					Class:      "w-full",					Attributes: collapsible.Trigger(ctx),				}) {					Product details					@icon.ChevronDown(icon.Props{Class: "ml-auto group-data-panel-open/button:rotate-180"})				}				@collapsible.Content(collapsible.ContentProps{Class: "flex flex-col items-start gap-2 p-2.5 pt-0 text-sm"}) {					<div>						This panel can be expanded or collapsed to reveal additional content.					</div>					@button.Button(button.Props{Size: button.SizeXs}) {						Learn More					}				}			}		}	}}

Settings Panel

Use a trigger button to reveal additional settings.

Radius

Set the corner radius of the element.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/card"	"github.com/axadrn/shadcn-templ/v2/components/collapsible"	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/input") templ CollapsibleSettings() {	@card.Card(card.Props{Class: "mx-auto w-full max-w-xs", Size: card.SizeSm}) {		@card.Header() {			@card.Title() {				Radius			}			@card.Description() {				Set the corner radius of the element.			}		}		@card.Content() {			@collapsible.Collapsible(collapsible.Props{Class: "flex items-start gap-2"}) {				@field.Group(field.GroupProps{Class: "grid w-full grid-cols-2 gap-2"}) {					@field.Field() {						@field.Label(field.LabelProps{For: "radius-x", Class: "sr-only"}) {							Radius X						}						@input.Input(input.Props{ID: "radius-x", Placeholder: "0", Value: "0"})					}					@field.Field() {						@field.Label(field.LabelProps{For: "radius-y", Class: "sr-only"}) {							Radius Y						}						@input.Input(input.Props{ID: "radius-y", Placeholder: "0", Value: "0"})					}					@collapsible.Content(collapsible.ContentProps{Class: "col-span-full grid grid-cols-subgrid gap-2"}) {						@field.Field() {							@field.Label(field.LabelProps{For: "radius-top", Class: "sr-only"}) {								Radius Top							}							@input.Input(input.Props{ID: "radius-top", Placeholder: "0", Value: "0"})						}						@field.Field() {							@field.Label(field.LabelProps{For: "radius-bottom", Class: "sr-only"}) {								Radius Bottom							}							@input.Input(input.Props{ID: "radius-bottom", Placeholder: "0", Value: "0"})						}					}				}				@button.Button(button.Props{					Variant:    button.VariantOutline,					Size:       button.SizeIcon,					Attributes: collapsible.Trigger(ctx),				}) {					@icon.Maximize(icon.Props{Class: "group-data-panel-open/button:hidden"})					@icon.Minimize(icon.Props{Class: "hidden group-data-panel-open/button:inline"})				}			}		}	}}

File Tree

Use nested collapsibles to build a file tree.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/card"	"github.com/axadrn/shadcn-templ/v2/components/collapsible"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/tabs") type fileTreeItem struct {	Name  string	Items []fileTreeItem} var fileTree = []fileTreeItem{	{Name: "components", Items: []fileTreeItem{		{Name: "ui", Items: []fileTreeItem{			{Name: "button.templ"},			{Name: "card.templ"},			{Name: "dialog.templ"},			{Name: "input.templ"},			{Name: "select.templ"},			{Name: "table.templ"},		}},		{Name: "login_form.templ"},		{Name: "register_form.templ"},	}},	{Name: "utils", Items: []fileTreeItem{		{Name: "utils.go"},		{Name: "cn.go"},		{Name: "api.go"},	}},	{Name: "internal", Items: []fileTreeItem{		{Name: "middleware.go"},		{Name: "session.go"},		{Name: "storage.go"},	}},	{Name: "types", Items: []fileTreeItem{		{Name: "types.go"},		{Name: "api.go"},	}},	{Name: "public", Items: []fileTreeItem{		{Name: "favicon.ico"},		{Name: "logo.svg"},		{Name: "images"},	}},	{Name: "main.go"},	{Name: "layout.templ"},	{Name: "globals.css"},	{Name: "go.mod"},	{Name: "go.sum"},	{Name: "README.md"},	{Name: ".gitignore"},} templ fileTreeEntry(item fileTreeItem) {	if len(item.Items) > 0 {		@collapsible.Collapsible() {			@button.Button(button.Props{				Variant:    button.VariantGhost,				Size:       button.SizeSm,				Class:      "w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground",				Attributes: collapsible.Trigger(ctx),			}) {				@icon.ChevronRight(icon.Props{Class: "transition-transform group-data-panel-open/button:rotate-90"})				@icon.Folder()				{ item.Name }			}			@collapsible.Content(collapsible.ContentProps{Class: "mt-1 ml-5"}) {				<div class="flex flex-col gap-1">					for _, child := range item.Items {						@fileTreeEntry(child)					}				</div>			}		}	} else {		@button.Button(button.Props{			Variant: button.VariantLink,			Size:    button.SizeSm,			Class:   "w-full justify-start gap-2 text-foreground",		}) {			@icon.File()			<span>{ item.Name }</span>		}	}} templ CollapsibleFileTree() {	@card.Card(card.Props{Class: "mx-auto w-full max-w-[16rem] gap-2", Size: card.SizeSm}) {		@card.Header() {			@tabs.Tabs(tabs.Props{DefaultValue: "explorer", ID: "file-tree-tabs"}) {				@tabs.List(tabs.ListProps{Class: "w-full"}) {					@tabs.Trigger(tabs.TriggerProps{Value: "explorer"}) {						Explorer					}					@tabs.Trigger(tabs.TriggerProps{Value: "outline"}) {						Outline					}				}			}		}		@card.Content() {			<div class="flex flex-col gap-1">				for _, item := range fileTree {					@fileTreeEntry(item)				}			</div>		}	}}

API Reference

Collapsible

The Collapsible component is the root that manages the open state and links trigger and content.

Prop	Type	Default
`Open`	`bool`	`false`
`Class`	`string`	-

Trigger

collapsible.Trigger(ctx) returns the attributes that turn any element into the trigger, usually spread onto a Button. The trigger carries data-panel-open while the panel is open.

Prop	Type	Default
`ctx`	`context.Context`	-

Content

The collapsible.Content component holds the content revealed by the trigger.

Prop	Type	Default
`Class`	`string`	-

Checkbox Combobox

On This Page

Installation Usage Composition Open State Basic Settings Panel File Tree API Reference Collapsible Trigger Content

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.