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.

<details>
  <summary>Simple details</summary>
  <p>
  The content
</details>

<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>

<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>