Details
Content that the user can show and hide on demand. This component is usually used for content that does not need to be displayed initially.
Features
- CSS only.
- Uses Html
<details>tag. - The
<summary>tag can contain a heading element (e.g.<h1>,<h2>,<h3>,<h4>,<h5>) and/or Html that can be used within a paragraph. - The
<summary>tag or its child element can have an icon, via the themes icon font (class="icon-…). - The content can be visible initially using the
openattribute.
Examples
View source for Html code.
Summary elements
Default
Details content.
Strong
Details content.
Heading 1
Details content.
Heading 2
Details content.
Heading 3
Details content.
Heading 4
Details content.
Heading 5
Details content.
Paragraph
Details content.
Comment
Details content.
Details content.
Icons
Default
Details content.
Strong
Details content.
Heading 1
Details content.
Heading 2
Details content.
Heading 3
Details content.
Heading 4
Details content.
Heading 5
Details content.
Paragraph
Details content.
Comment
Details content.
Details content.
Open
Default
Details content.
Menu
The menu is positioned on top of other elements.