HTML5 details and summary elements
Support for details is quite good, but not available in all browsers. In browsers without support, elements would be displayed as regular content (not hidden).
More details on details.
The content
Simple details
<details>
<summary>Simple details</summary>
<p>
The content
</details>
Nested details
First level content
Second level content
<details>
<summary>Nested details</summary>
<p>
First level content
<details>
<summary>Second level content</summary>
<ul>
<li>List
<li>Of
<li>Nested
<li>Content
</ul>
</details>
</details>
Styled details
Styled content
<details class="styled">
<summary>Styled details</summary>
<p>
Styled content
</details>
<style>
/* Style summary to make it look clickable */
details.styled summary {
background-color: #eee;
border-radius: .25em;
cursor: pointer;
display: inline-block;
padding-left: .5em;
padding-right: 1em;
}
details.styled summary:hover {
background-color: #f5f5f5;
}
/* Hide marker in Chrome, Safari */
details.styled summary::-webkit-details-marker {
display: none;
}
/* Hide marker in Firefox */
details.styled summary {
list-style: none;
}
/* Custom marker */
details.styled summary::before {
content: "+";
display: inline-block;
padding-right: .5em;
}
details[open].styled summary::before {
content: "-";
}
/* Style content */
details[open].styled > :not(summary) {
border: 1px solid #ccc;
padding: .5em;
}
</style>