Skip to content
Gx
GitHub

Collapsible

One panel that opens on demand.

Open the preview in a new tab 

<collapsible.Collapsible open>
  <:summary>Show details</:summary>
  Hidden content.
</collapsible.Collapsible>

Installation

Run the command in the app module.

Terminal
gx add collapsible

The command writes these files.

File Path in the app
Collapsible.gx ui/collapsible/Collapsible.gx
Collapsible.fixtures.go ui/collapsible/Collapsible.fixtures.go

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/collapsible/Collapsible.gx
package collapsible

props {
  // Summary is the content of the summary, the part that opens and closes the panel.
  Summary  gx.Node
  // Open renders the collapsible open. The default is closed.
  Open     bool = false
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the panel.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<details open={p.Open} class={gx.Cx("group/collapsible [interpolate-size:allow-keywords] [&::details-content]:h-0 [&::details-content]:overflow-hidden [&::details-content]:transition-[height,content-visibility] [&::details-content]:transition-discrete [&::details-content]:duration-200 [&::details-content]:ease-out open:[&::details-content]:h-auto motion-reduce:[&::details-content]:transition-none", p.Class)} {...p.Attrs}>
  <summary class="inline-flex cursor-pointer list-none items-center gap-2 rounded-md outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] [&::-webkit-details-marker]:hidden">{p.Summary}</summary>
  {p.Children}
</details>
ui/collapsible/Collapsible.fixtures.go
package collapsible

import "github.com/alternayte/gx"

var CollapsibleFixtures = gx.Fixtures[CollapsibleProps]{
	"Open":   {Summary: gx.Text("Show details"), Open: true, Children: gx.Text("Hidden content.")},
	"Closed": {Summary: gx.Text("Show details"), Children: gx.Text("Hidden content.")},
}

The theme must define these tokens: --ring.

Usage

<collapsible.Collapsible summary={gx.Text("Show details")}>
  <p>Hidden content.</p>
</collapsible.Collapsible>

The panel uses the native <details> element. The panel height animates in a browser that supports interpolate-size. Other browsers open the panel at once. The panel has no spacing of its own. Put the spacing on the content.

Examples

Open

Open the preview in a new tab 

<collapsible.Collapsible open>
  <:summary>Show details</:summary>
  Hidden content.
</collapsible.Collapsible>

Closed

Open the preview in a new tab 

<collapsible.Collapsible>
  <:summary>Show details</:summary>
  Hidden content.
</collapsible.Collapsible>

API reference

A tag sets a prop by its name with a lower-case first letter: Class is class.

collapsible.Collapsible

Prop Type Default Description
Summary gx.Node Required Summary is the content of the summary, the part that opens and closes the panel.
Open bool false Open renders the collapsible open. The default is closed.
Class string "" Class adds classes to the root element.
Children gx.Node Required Children is the content of the panel.
Attrs gx.Attrs nil Attrs adds HTML attributes to the root element.

Do and do not

Do

  • Use it for one optional block of content.
  • Put a verb in the summary.

Don't

  • Do not hide essential content.
  • Do not use a collapsible for a list of questions. Use an accordion.

Keyboard

Key Action
Tab Moves focus to the summary.
Enter, Space Opens or closes the panel.