// Generated by scripts/generate-showcase.mjs. Do not edit directly. page CollapseDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"collapse-default-panel\",\n \"label\": \"Collapse\",\n \"closeLabel\": \"Collapse\",\n \"content\": \"This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused.\"\n }\n]" state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" state playground_mode = ctx.url.searchParams.get("pg_mode") ?? "panel" state playground_initialOpenIndexes = ctx.url.searchParams.get("pg_initialOpenIndexes") ?? "[]" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Default collapse" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Collapse" description = "Theme-aware, responsive collapse component." } view {
Base component

Collapse

Theme-aware, responsive collapse component.

8 props1 slots3 eventsTheme readyResponsive
Interactive playground

Configure Collapse

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Collapse
  items='[
    {
      "id": "collapse-default-panel",
      "label": "Collapse",
      "closeLabel": "Collapse",
      "content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
    }
  ]'
  initialOpenIndexes='[]'
  ariaLabel="Default collapse"
/>
Component props8 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default collapse

Use a button trigger to expand and collapse supporting content.

01
Live preview
Component usage.wrn
<Collapse
  items='[
    {
      "id": "collapse-default-panel",
      "label": "Collapse",
      "closeLabel": "Collapse",
      "content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
    }
  ]'
  initialOpenIndexes='[]'
  ariaLabel="Default collapse"
/>
Inline content

Read more toggle

Reveal additional copy inline with a read more and read less trigger.

02
Live preview
Component usage.wrn
<Collapse
  items='[
    {
      "id": "collapse-read-more-panel",
      "label": "Read more",
      "closeLabel": "Read less",
      "preview": "WireJS UI is an open-source set of reusable components based on a utility-first styling system.",
      "content": "This additional collapse body is hidden by default. Expanding it reveals supporting information while preserving a compact reading experience."
    }
  ]'
  mode="inline"
  initialOpenIndexes='[]'
  ariaLabel="Read more toggle"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@toggleFires when the component toggles between states.
@openFires when the component opens.
@closeFires when the component closes.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('toggle', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
itemsstring[]No
multiplebooleanfalseNo
modestring"panel"No
initialOpenIndexesstring[]No
ariaLabelstring"Collapsible content"No
classstring""No
} }