Expandable-subsection heading + + … + +
Subsection headings devide a section further into subsections. The difference between an expandable-subsection heading and a regular one is that the exandable subsection’s content is collapsed on a webpage by default. It is revealed once the reader clicks on the heading or opens it by other means offered by their browser.
Expandable subsections usually contain additional information that is not necessary for understanding the main point of a section.
How to
Mark both the start and the end of an expandable-subsection heading with two space-separated plus signs + + as in the example below. The expandable-subsection heading is block markup, so blank lines are expected before and after it.
Avoid links within expandable-subsection headings. A click on an expandable-subsection heading expands the subsection in a browser whereas a click on a link makes the browser navigate to the linked page. The expected behavior would not be clear, if link and expandable-subsection heading were combined.
Example
The example shows one of many sections from a page about the decathlon. The section has an expandable subsection. Click on its heading technical details
to expand the subsection.
--- Discus throw ---
The second throwing discipline in decathlon is the discus throw. The sport had already been mentioned in Homer’s "Iliad" and was introduced in the ancient Olympic Games as part of the pentathlon in 708 BCE.
+ + Technical details + +
In modern competitions, men throw a 2kg discus with a 22cm diameter. They do so with a single bare hand from a throwing circle which measures 250cm across. The athlete may not leave the circle before the discus lands. For a valid attempt, the discus must land within a marked area which opens with a 34.92° angle.Discus throw
The second throwing discipline in decathlon is the discus throw. The sport had already been mentioned in Homer’s Iliad
and was introduced in the ancient Olympic Games as part of the pentathlon in 708 BCE.
Technical details
In modern competitions, men throw a 2kg discus with a 22cm diameter. They do so with a single bare hand from a throwing circle which measures 250cm across. The athlete may not leave the circle before the discus lands. For a valid attempt, the discus must land within a marked area which opens with a 34.92° angle.
See the page about section and subsections for another example.
For developers
An expandable-subsection heading is turned into a HTML h3 element wrapped in a summary element when Aneamal is translated into a webpage. The whole expandable subsection, heading included, is wrappend in an HTML details element with a class attribute whose value is derived from the heading. The expandable subsection from the example becomes:
<details class='technical-details'>
<summary>
<h3>Technical details</h3>
</summary>
<p>In modern competitions, men throw a 2kg discus with a 22cm diameter. They do so with a single bare hand from a throwing circle which measures 250cm across. The athlete may not leave the circle before the discus lands. For a valid attempt, the discus must land within a marked area which opens with a 34.92° angle.</p>
</details>Line breaks inside the heading would become HTML br elements. Each line but the first one in a multiline heading gets wrapped in a HTML span element.