Collapse

<div class="ui-collapse">
  <button type="button" class="ui-collapse__trigger"
    id="collapse-trigger" aria-expanded="false"
    aria-controls="collapse-panel">
    <span class="ui-collapse__trigger-label">Advanced options</span>
    <span class="ui-icon ui-icon--chevron-down ui-collapse__chevron"
      aria-hidden="true"></span>
  </button>
  <div class="ui-collapse__panel" role="region"
    id="collapse-panel" aria-labelledby="collapse-trigger"
    aria-hidden="true" inert>
    <div class="ui-collapse__panel-body">Extra settings.</div>
  </div>
</div>

import { Collapse, CollapseTrigger, CollapsePanel } from 'caustica-design/core'

<Collapse defaultOpen={false}>
  <CollapseTrigger>Advanced options</CollapseTrigger>
  <CollapsePanel>Extra settings.</CollapsePanel>
</Collapse>