Hide modes

hideMode="remove" (the default) takes collapsed content out of the document with display: none. hideMode="hide" keeps the box in the render tree and hides it with visibility: hidden plus a managed aria-hidden. Children stay mounted either way — the choice is about what the rest of the page can still see.

Two ways to be closed

Once the collapse animation settles, something has to decide what the closed content is to the rest of the page. That's hideMode:

remove (default) — the container goes display: none. The content is gone: out of layout, out of the accessibility tree.
hide — the container stays display: grid with its track held at 0fr, the content gets visibility: hidden, and the inner wrapper gets aria-hidden="true" while closed, "false" while open — managed for you.

It's one prop on the component:

TSXmap-panel.tsx

import { useState } from 'react'
import { Collapsible } from '@westopp/react-collapsible'

const MapPanel = () => {
const [open, setOpen] = useState(false)
return (
  <>
    <button type="button" aria-controls="hide-modes-map" aria-expanded={open} onClick={() => setOpen(!open)}>
      {open ? 'Hide map' : 'Show map'}
    </button>
    <Collapsible id="hide-modes-map" open={open} hideMode="hide">
      <iframe title="Office map" src="https://maps.example.com/embed" />
    </Collapsible>
  </>
)
}

Same toggle, different closed

The two panels below are identical except for hideMode, and one piece of state drives both. Watching them animate tells you nothing — the difference only shows up in what's left behind when they're closed.

hideMode="remove"

Type something, collapse, reopen

Collapsed: display none — no box, nothing to measure.

content measures: …

hideMode="hide"

content measures: …

One open state drives both panels — either button toggles them together. Type into the inputs, collapse, reopen: both values survive, because children stay mounted in both modes. Now watch the readouts while collapsed: the remove panel measures 0px, the hide panel keeps its intrinsic height.

What actually differs

Everything that differs happens while collapsed:

While collapsed	remove (default)	hide
display	none	grid — track held at 0fr
visibility	not set	hidden
aria-hidden	not set	true while closed, false while open — set on the inner wrapper for you
measured size	0 × 0	content keeps its intrinsic dimensions
container class	collapsible-y	collapsible-y-hidden

With remove, the closed content has no box at all: it can't be focused, it's invisible to screen readers, and anything that measures it reads zero dimensions. With hide, the element box stays in the render tree — content keeps its intrinsic dimensions if you measure it, and assistive-tech exclusion is handled by aria-hidden rather than display.

Under the hood the prop is a class switch on the container — collapsible-y becomes collapsible-y-hidden (and collapsible-x becomes collapsible-x-hidden for horizontal collapse). Trimmed to the lines that differ, the shipped stylesheet reads:

CSSstyles.css

/* hideMode="remove" — closed container (default) */
.collapsible-y {
display: none;
grid-template-rows: 0fr;
}

/* hideMode="hide" — closed container */
.collapsible-y-hidden {
display: grid; /* the box stays in the render tree */
visibility: hidden;
grid-template-rows: 0fr;
}

What doesn't differ

React children stay mounted in both modes — the component never unmounts your content on collapse, and display: none doesn't unmount React components either. An input's value, a video element's playback position, any component state inside the panel: all of it survives collapse in both modes, as the demo above shows.

Both modes also animate identically. The track transition between 0fr and 1fr is the same; the only difference is the discrete property that rides along with it — display in remove mode, visibility in hide mode. How that transition works end-to-end is covered in how it works.

When to reach for hide

You need the content's layout or dimensions while it's closed. Measuring a display: none subtree reads zero everywhere; in hide mode, content keeps its intrinsic size.
Embedded content that misbehaves at zero size. Maps, charts, and players that measure their own box read 0 × 0 under display: none and can misrender when revealed; under visibility: hidden they keep their real dimensions.

Otherwise stay with remove. Gone means gone: no extra attribute management, nothing for the rest of the page to trip over.

Previous← Controlled state NextConditional classes →