Details and Summary HTML Objects

collapsible area

Here is the simplest usage of the 2 elements:

<details>
  <summary>Summary</summary>
  <p>This is below the summary tag containing the details content.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ipsum eius adipisci quam
    aut perspiciatis atque, reiciendis minima rerum quos ad maxime vitae, quidem consequatur praesentium
    neque ut. Quibusdam, doloribus!</p>
</details>
    

that you can try here:

Styling

To remove the triangle the summary element has to be modified with list-style:none:

To use other symbols you can use images but with the usual problem on list-style-image is that they do not resize to the line height:

details.v2>summary { list-style-image: url('17red.png'); }
details.v2[open] > summary { list-style-image: url('17green.png'); }
    

However a CSS ::before element can be used that allows rich design options:

details.v3>summary {
  display: block;
}

details.v3>
summary::before {
  content: '';
  display: inline-block;
  height: 1.2em;
  width: 1.2em;
  vertical-align: top;
  border-radius: 50%;
  margin-right: 0.5em;
  background: green url("data:image/svg+xml;utf8,<svg ...
}

details.v3[open]>summary::before {
  background: blue url("data:image/svg+xml;utf8,<svg ...
}

Smooth options

There is a nice article on using animations for the details element at https://css-tricks.com/how-to-animate-the-details-element/ and animations are somehow limited using CSS only.

See Also

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Tags