Expandable-section heading `+++ … +++`

Section headings devide a webpage into sections and provide readers with an idea of what to expect in them. The distinguishing feature of expandable-section headings in comparison with regular ones is that their section’s content is not visible on a webpage by default. It becomes visible when a reader clicks on the heading or activates it in other ways.

Expandable-section headings often introduce sections with additional details that are not required for understanding the main message of a page. But they can be useful in other scenarios as well, for instance a FAQ page like in the example.

How to

Mark both the start and the end of an expandable-section heading with three plus signs like in the example below. The expandable-section heading is block markup, so there usually need to be blank lines before and after it.

It is recommended abstain from links in expandable-section headings. Expandable sections are toggled open in the browser by a click on the heading while clicking on a link causes the browser to navigate to the linked destination. Having both combined can confuse readers and defy their expectations.

Example

Each question in the following frequently-asked-questions page is an expandable-section heading. Click on them to reveal the answers.

=== Minigolf FAQ ===

+++ Is my pug a minigolf? +++

No, a pug is a mini_w_olf.

+++ Is "minigolf" a synonym for "polo"? +++

Polo players also hit a ball with a club, but they do so while riding a horse. No four-legged mounts are utilized in minigolf.

The name "minigolf" is derived from golf sport which is played quite similarily to minigolf, but requires many times more space.

The common confusion of minigolf with polo probably stems from the automotive world. Volkswagen’s best seller is called "Golf" and its smaller sibling indeed "Polo". But this is unrelated to our sport.

+++ Is the use of firearms permitted in minigolf? +++

No!

Minigolf FAQ

Is my pug a minigolf?

No, a pug is a miniwolf.

Is minigolf a synonym for polo?

Polo players also hit a ball with a club, but they do so while riding a horse. No four-legged mounts are utilized in minigolf.

The name minigolf is derived from golf sport which is played quite similarily to minigolf, but requires many times more space.

The common confusion of minigolf with polo probably stems from the automotive world. Volkswagen’s best seller is called Golf and its smaller sibling indeed Polo. But this is unrelated to our sport.

Is the use of firearms permitted in minigolf?

No!

For developers

When Aneamal is translated to HTML, an expandable-section heading becomes a h2 element wrapped in a summary element. The whole expandable section with its heading is wrappend in an HTML details element with a class attribute whose value is derived from the heading. The example becomes:

<h1>Minigolf FAQ</h1>
<details class='is-my-pug-a-minigolf'>
<summary>
<h2>Is my pug a minigolf?</h2>
</summary>
<p>No, a pug is a mini<u>w</u>olf.</p>
</details>
<details class='is-minigolf-a-synonym-for-polo'>
<summary>
<h2>Is <q>minigolf</q> a synonym for <q>polo</q>?</h2>
</summary>
<p>Polo players also hit a ball with a club, but they do so while riding a horse. No four-legged mounts are utilized in minigolf.</p>
<p>The name <q>minigolf</q> is derived from golf sport which is played quite similarily to minigolf, but requires many times more space.</p>
<p>The common confusion of minigolf with polo probably stems from the automotive world. Volkswagen’s best seller is called <q>Golf</q> and its smaller sibling indeed <q>Polo</q>. But this is unrelated to our sport.</p>
</details>
<details class='is-the-use-of-firearms-permitted-in-minigolf'>
<summary>
<h2>Is the use of firearms permitted in minigolf?</h2>
</summary>
<p>No!</p>
</details>

Line breaks in a heading become HTML br elements. The second to last line of a multiline heading get each wrapped in HTML span elements.

By default, browsers apply the CSS declaration display: list-item to the summary element. Hence the triangle that is typically displayed next to an expandable-section heading can be selected in CSS with the marker pseudo-element. For instance, the following CSS would increase its size:

summary::marker {
	font-size: larger;
}

The HTML details element automatically gets an open attribute that can be selected in CSS when the corresponding section is expanded. So, for example, the following CSS code would remove the triangle next to an expandable-section heading in the open state:

details[open] > summary {
	list-style-type: none;
}

Accessibility advice

Not all readers are familiar with disclosure widgets, which is what expandable sections are from a technical point of view. Some readers may not realize that a click on the heading reveals further information. This problem can be mitigated with CSS by styling headings of closed expandable sections like a link, since links are known to be clickable and to lead to more content. For example:

details:not([open]) > summary > * {
	color: blue;
	cursor: pointer;
	font: inherit;
	text-decoration: underline;
}

Expandable-section heading +++ … +++