# Collapsible

> One "show more", without the borders and grouping of an accordion.

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

```javascript
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

```javascript
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

```javascript
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.

```javascript
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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | `Child` | — | The summary content. Text and icons only. |
| `open` | `boolean` | `false` | Whether it starts expanded. |