Fylgja Collapsible Callout

A collapsible callout is a callout the reader can fold away, for a long remark that would otherwise break up the page. Swapping the <div> for a <details> and the title <p> for a <summary> is the whole change, so the browser handles the toggle, the keyboard, and the semantics.

Preview

Read this before upgrading

The v3 release drops Sass. Compile from the CSS files instead, and the output stays the same.

Already expanded

Add the open attribute to a callout that should start unfolded.

<details class="callout" data-callout="warning">
	<summary class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>
		<strong>Read this before upgrading</strong>
		<svg class="callout-fold-icon" viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"/></svg>
	</summary>
	<p>The v3 release drops Sass. Compile from the CSS files instead, and the output stays the same.</p>
</details>
<details class="callout" data-callout="tip" open>
	<summary class="callout-title">
		<svg viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"/></svg>
		<strong>Already expanded</strong>
		<svg class="callout-fold-icon" viewBox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"/></svg>
	</summary>
	<p>Add the open attribute to a callout that should start unfolded.</p>
</details>

Usage

  • Use <details class="callout"> as the container, with the type in data-callout.
  • Make the title a <summary class="callout-title"> instead of a paragraph.
  • Add a second <svg class="callout-fold-icon"> at the end of the title. It points down when folded and turns as the callout opens.
  • Add open to the <details> for a callout that starts expanded.
  • Give every <details> in a group the same name to fold the others when one opens, the same exclusive behavior the accordion uses.

Anatomy

  • <details class="callout"> is the container and owns the open state.
  • <summary class="callout-title"> is the title row and the control that toggles it. The browser’s own disclosure triangle is hidden, so the title reads as one line.
  • .callout-fold-icon is the indicator. It is a plain <svg> in the title, turned by CSS when the callout is open.
  • Everything after the summary is the folded content.

Accessibility

  • <summary> is already a button to assistive technology and reports whether the callout is expanded, so it needs no role or aria-expanded.
  • It is focusable and toggles with Enter or Space out of the box. Do not put another interactive element inside it.
  • Keep the <strong> label descriptive. It is the accessible name of the control, so it should say what folding it reveals.
  • Mark both icons aria-hidden="true". The folding state is already announced.
  • Content inside a closed <details> is hidden from find-in-page in some browsers, so do not fold away anything a reader must not miss.

FAQ

How do I make a callout start expanded?

Add the open attribute to the details element. Without it the callout starts folded.

Does the folding need JavaScript?

No. The details and summary elements handle the toggle, the keyboard, and the semantics natively, and the icon turns with a CSS transition.

Why does the disclosure triangle not show?

The component hides it, because the callout supplies its own folding icon in the title. Leave out the callout-fold-icon element and the title has no indicator at all.