1.3 base.details Details and Summary
Custom styling added to replace accordion-type content with semantic HTML
Example
Summary Demonstration
Details text for demonstration purposes. This handy HTML5 element can be used to replace accordions and other structures with semantic markup that requires no scripting.
Also, it is good to note that when display: block; is used on the details element, the default arrow indicator will not show. This can be rectified by using display: list-item;.
Markup: base/details.twig
<details>
<summary>Summary Demonstration</summary>
<p>Details text for demonstration purposes. This handy HTML5 element can be used to replace accordions and other structures with semantic markup that requires no scripting.</p>
<p>Also, it is good to note that when <code>display: block;</code> is used on the details element, the default arrow indicator will not show. This can be rectified by using <code>display: list-item;</code>.</p>
</details>
Source:
sass/base/_base.scss, line 416