Styling the details/summary element

The default element can be styled to liven it up a bit.

The HTML5 <details>/<summary> element is a ‘disclosure widget‘ or an accordion like the jQuery accordion. As it is built into browser we get the functionality without extra CSS or JS.

The default styling and behaviour is simple but plain so let’s see how we can improve things.

Note: To distinguish the element from the surrounding content I add a border and light background to it when it is open.

Default styling and behaviour

Click this to open this section

Here is the hidden content area. It can be multiple lines.

Note: To distinguish the .

Basic enhancement

The default mouse pointer is the text editing ‘I’ shape, not one you would associate with a clickable element. Let’s change it to the hand pointer.

<style>
details { cursor: pointer; }
</style>

Click this to open this section

The only difference is to set cursor:pointer so that the user sees the mouse cursor change when hovering over the clickable text.

But we can go further.

Style the arrow head marker

As the <details>/<summary> element displays like a list item, we use list-style-type to change the arrow head marker. Here we change it to a custom arrow head (unicode items \25C2 and \25BE) on the right of the element.

<style>
details { cursor: pointer; }
details summary { list-style-type: none; }
details summary { position: relative; }
details summary:after { position: absolute; content: "\25C2"; right: 0; } /* Bigger left pointing triangle: \25C0 */
details[open] summary:after { content: '\25BE'; }/* Bigger down triangle: \25BC */
</style>

Click this to open this section (arrow on right!)

The arrow head can be removed with list-style-type:none set on the <summary> element.

To add a custom marker to the top right we use summary:after to add content absolutely positioned.

Then the [open] attribute can be styled to optionally change the content.

The code for the triangles was found with UniView 15

Some simple styling

The MDN <details> article has some styling examples. To select the hidden contents we wrap them in a <div>. This demo adds a little opacity fade-in animation.

<style>
details { cursor: pointer; }
details[open] summary { text-decoration: underline; }
details[open] .panel { border: 1px solid #999; box-shadow: 5px 5px 10px 0 #bbb; margin-top: 0.5em; padding: 0 1em; animation: sweep 1s ease-in-out; }
@keyframes sweep {
  0%    {opacity: 0; margin-top: -10px}
  100%  {opacity: 1; margin-top: 0px}
}
</style>

Click this to open this section

The hidden content area.

It can be multiple lines.