14.1 #Text.collapsible-container Collapsible container
This is an adaptation of a the solution I found on StackOverflow.
A <input type="checkbox"> is used to control the state of the collapsible.
The <label> right after the <input> is styled as a link of color --theme-color.
If <label> contains exactly two children, then the first is shown when in collapsed state,
while the second is shown when in expanded state.
<label> has an ::after child showing a downward/upward guillemot glyph to signify that the
collapsible is expandable (i.e. collapsed) or collapsible (i.e. expanded).
The duration of the change of state is --collapsible-transition-time.
Note: because of reasons explained at the link above, it's unlikely that
the default --collapsible-transition-time will do well for any height of the
collapsed element, so it's probably best to set it directly in the HTML as an
inline style on a case by case basis.
Note: Do not remove the <div> right inside the .collapsible, as it is needed.
Text that follows…
…Moves to occupy the space left by the collapsible.
Markup
<div class="collapsible-widget" style="--collapsible-transition-time: 0.2s">
<input type="checkbox" value="" name="show more" id="collapsible-example-1"/>
<label for="collapsible-example-1"><span>Child of label 1/2</span><span>Child of label 2/2</span></label>
<div class="collapsible">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="collapsible-widget" style="--collapsible-transition-time: 0.2s">
<input type="checkbox" value="" name="show more" id="collapsible-example-2"/>
<label for="collapsible-example-2">
<span style="border: dashed;">These are</span>
<span style="border: dashed;">three children</span>
<span style="border: dashed;">of label</span></label>
<div class="collapsible">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="collapsible-widget" style="--collapsible-transition-time: 0.2s">
<input type="checkbox" value="" name="show more" id="collapsible-example-3"/>
<label for="collapsible-example-3"><span>Only child of label</span></label>
<div class="collapsible">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div>
<h1>Text that follows…</h1>
<p>…Moves to occupy the space left by the collapsible.
</div>css/modules/text/collapsible-container.css, line 1