Skip to main content

Collapse

Result
Loading...
Live Editor
<div data-testid="pw-collapse">
	<Collapse
		renderOpenedTrigger={(setOpen, triggerProps) => (
			<Button
				variant="secondary"
				onClick={() => setOpen(false)}
				aria-controls="collapsible-content"
				{...triggerProps}
			>
				Hide
			</Button>
		)}
		renderClosedTrigger={(setOpen, triggerProps) => (
			<Button onClick={() => setOpen(true)} aria-controls="collapsible-content" {...triggerProps}>
				Open
			</Button>
		)}
	>
		<div id="collapsible-content">Here is some expanded content.</div>
	</Collapse>
</div>

Render opened on first load​

Result
Loading...
Live Editor
<Collapse
	renderOpenedTrigger={(setOpen, triggerProps) => (
		<Button
			variant="secondary"
			onClick={() => setOpen(false)}
			aria-controls="collapsible-content"
			{...triggerProps}
		>
			Hide
		</Button>
	)}
	renderClosedTrigger={(setOpen, triggerProps) => (
		<Button onClick={() => setOpen(true)} aria-controls="appear-content" {...triggerProps}>
			Open
		</Button>
	)}
	appear
>
	<div id="appear-content">
		The appear prop will cause the component to render opened the first time.
	</div>
</Collapse>

Props​