Collapsible

A collapsible is a single <details> — the same element an accordion is built from, with none of its chrome. Use it for one optional detail in the middle of a page; use accordion() when there is a set of them.

It needs no script, and because the content stays in the document it is findable with the browser’s own find-in-page and by a search engine.

Basic collapsible

Show the generated config

Everything sitelo writes when you run the build with no config file of your own.

collapsible({ trigger: 'Show the generated config' },
  text({ variant: 'small' }, 'Everything sitelo writes when you run the build with no config file of your own.'),
)

Open by default

Why this exists

Because a page that hides its explanation behind a click is a page nobody reads.

collapsible({ trigger: 'Why this exists', open: true },
  text({ variant: 'small' }, 'Because a page that hides its explanation behind a click is a page nobody reads.'),
)

Rich content

Show the full output
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Show the full output' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Inside other things

A collapsible sits happily inside a card, an alert or a table cell.

Build failed

2 broken links

Show the failing links
  • /docs/old-routing
    linked from /docs
  • /blog/draft
    linked from /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Build failed', subtitle: '2 broken links' }),
    cardBody(
      collapsible({ trigger: 'Show the failing links' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'linked from /docs' }),
          listItem({ title: '/blog/draft', description: 'linked from /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Slow page' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'One page took over 500 ms to render.'),
      collapsible({ trigger: 'Show timings' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

The trigger

Keep it to text and icons. A <summary> is already interactive, so a button or a link inside one nests two controls where there is a single action — the same rule menu() follows.

Collapsible or accordion?

One disclosure on its own: collapsible(). A set of them, bordered and grouped, optionally with only one open at a time: accordion().

Props

PropTypeDefaultDescription
triggerChild—The summary content. Text and icons only.
openbooleanfalseWhether it starts expanded.