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.
Leave a Reply