One disclosure region: a trigger row that shows and hides the content under it.

<.collapsible>
  <:trigger>Advanced options</:trigger>
  <p>Timeouts, retries and the webhook signing secret.</p>
</.collapsible>

<.collapsible open={@show_details} id="api-keys">
  <:trigger>API keys (3)</:trigger>
  <ul>...</ul>
</.collapsible>

Collapsible or accordion?

This is one region with no neighbours: nothing closes when it opens, and there is no list of entries. When you have a set of sections where opening one should close the others, that is PetalComponents.Accordion.accordion/1.

State

Toggling is client-side Phoenix.LiveView.JS, so an open/close costs no round trip. The open attr sets the state the server renders, which means LiveView can drive it too: re-render with a changed assign and the region follows. Pass extra commands through on_toggle (analytics, a phx-click to persist the state) and they run before the component's own.

Animation

The height animation is the grid-template-rows: 0fr -> 1fr trick, so content of any height animates without measuring anything in JavaScript. Under prefers-reduced-motion: reduce the transition is dropped and the region snaps open, fully legible either way.

Accessibility

The trigger is a real <button type="button">, so Enter and Space work for free and focus stays put across toggles. It carries aria-expanded and aria-controls pointing at the content region, which is role="region" labelled by the trigger. While collapsed the content is inert, so it is out of the tab order and out of the accessibility tree instead of being an invisible trap. disabled uses the button's native disabled attribute.