Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-themes/primitives

<Collapsible.root id="collapsible-primitive" class="DemoCollapsibleRoot">
  <div style="display: flex; align-items: center; justify-content: space-between;">
    <span class="DemoText" style="color: white;">
      @peduarte starred 3 repositories
    </span>
    <Collapsible.trigger
      id="collapsible-trigger"
      content_id="collapsible-content"
      class="DemoIconButton"
      aria-label="Toggle"
    >
      <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
        <path
          d="M3.5 5.5h8M3.5 9.5h8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
        />
      </svg>
    </Collapsible.trigger>
  </div>

  <div class="DemoRepository">
    <span class="DemoText">@radix-themes/primitives</span>
  </div>

  <Collapsible.content id="collapsible-content">
    <div class="DemoRepository">
      <span class="DemoText">@radix-themes/colors</span>
    </div>
    <div class="DemoRepository">
      <span class="DemoText">@radix-themes/themes</span>
    </div>
  </Collapsible.content>
</Collapsible.root>

/* reset */
button {
	all: unset;
}

.DemoCollapsibleRoot {
	width: 300px;
}

.DemoIconButton {
	font-family: inherit;
	border-radius: 100%;
	height: 25px;
	width: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--violet-11);
	box-shadow: 0 2px 10px var(--black-a7);
}
.DemoIconButton[data-state="closed"] {
	background-color: white;
}
.DemoIconButton[data-state="open"] {
	background-color: var(--violet-3);
}
.DemoIconButton:hover {
	background-color: var(--violet-3);
}
.DemoIconButton:focus {
	box-shadow: 0 0 0 2px black;
}

.DemoText {
	color: var(--violet-11);
	font-size: 15px;
	line-height: 25px;
}

.DemoRepository {
	background-color: white;
	border-radius: 4px;
	margin: 10px 0;
	padding: 10px;
	box-shadow: 0 2px 10px var(--black-a7);
}

.DemoCollapsibleContent {
	overflow: hidden;
}
.DemoCollapsibleContent[data-state="open"] {
	animation: demoCollapsibleSlideDown 300ms ease-out;
}
.DemoCollapsibleContent[data-state="closed"] {
	animation: demoCollapsibleSlideUp 300ms ease-out;
}

@keyframes demoCollapsibleSlideDown {
	from {
		height: 0;
	}
	to {
		height: var(--radix-collapsible-content-height);
	}
}

@keyframes demoCollapsibleSlideUp {
	from {
		height: var(--radix-collapsible-content-height);
	}
	to {
		height: 0;
	}
}

• Full keyboard navigation.

• Can be controlled or uncontrolled.

Anatomy

Import the components and piece the parts together.

<Collapsible.root id="…">
  <Collapsible.trigger content_id="…" />
  <Collapsible.content id="…" />
</Collapsible.root>

Anatomy

Root: Contains all the parts of a collapsible.
Trigger: The button that toggles the collapsible.
Content: The component that contains the collapsible content.

API Reference

Root

Contains all the parts of a collapsible.

Use open with on_open_change for controlled open state in LiveView:

<Collapsible.root id="repos" open={@open} on_open_change="collapsible_open_change">
  …
</Collapsible.root>

def handle_event("collapsible_open_change", %{"open" => open}, socket) do
  {:noreply, assign(socket, :open, open == "true" or open == true)}
end

Prop	Type	Default
`default_open`	`boolean`	`false`
`disabled`	`boolean`	`false`
`id`	`string`	`—`
`on_open_change`	`string`	`nil`
`open`	`boolean`	`false`

default_open

Type boolean Default false

disabled

Type boolean Default false

id

Type string Default —

on_open_change

Type string Default nil

open

Type boolean Default false

Data attributes

Attribute	Values	Description
`[data-state]`	`open \| closed`	Reflects whether the collapsible is open.
`[data-disabled]`	`Present when disabled`	Present when the collapsible is disabled.

Trigger

The button that toggles the collapsible. Pass content_id matching the id on Collapsible.content.

Prop	Type	Default
`content_id`	`string`	`nil`
`disabled`	`boolean`	`false`
`id`	`string`	`nil`

content_id

Type string Default nil

disabled

Type boolean Default false

id

Type string Default nil

Data attributes

Attribute	Values	Description
`[data-state]`	`open \| closed`	Reflects whether the collapsible is open.
`[data-disabled]`	`Present when disabled`	Present when the collapsible is disabled.

Content

The component that contains the collapsible content.

Prop	Type	Default	Description
`force_mount`	`boolean`	`false`
`id`	`string`	`—`

force_mount

Type boolean Default false

id

Type string Default —

Data attributes

Attribute	Values	Description
`[data-state]`	`open \| closed`	Reflects whether the collapsible is open.
`[data-disabled]`	`Present when disabled`	Present when the collapsible is disabled.

Essence exposes CSS variables on content for size animations:

| CSS variable | Description | | --- | --- | | --radix-collapsible-content-width | The width of the content when it opens/closes | | --radix-collapsible-content-height | The height of the content when it opens/closes |

Examples

Animating content size

Use the --radix-collapsible-content-width and/or --radix-collapsible-content-height CSS variables to animate the size of the content when it opens/closes:

<Collapsible.content id="collapsible-animated-content" class="DemoCollapsibleContent">
  …
</Collapsible.content>

.DemoCollapsibleContent {
  overflow: hidden;
}
.DemoCollapsibleContent[data-state="open"] {
  animation: demoCollapsibleSlideDown 300ms ease-out;
}
.DemoCollapsibleContent[data-state="closed"] {
  animation: demoCollapsibleSlideUp 300ms ease-out;
}

@keyframes demoCollapsibleSlideDown {
  from { height: 0; }
  to { height: var(--radix-collapsible-content-height); }
}

@keyframes demoCollapsibleSlideUp {
  from { height: var(--radix-collapsible-content-height); }
  to { height: 0; }
}

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.