On occasion we need to present a summary of content while allowing the user to deep dive if they want to. The details element is a great way to do this, with good browser support as well. Let’s see how.
As W3C standards are evolving, along with browsers implementing them gradually, we get to use new elements which so far needed JavaScript to implement. The details element is one of these. It allows us to present a summary of content and at user choice, to show a detailed view of that content.
All this with no JavaScript at all. Here’s how.
<details class="highlight">
<summary>Custom hover states on this page</summary>
<pre><code>
a:hover {
text-decoration: underline;
text-decoration-thickness: .1em;
text-underline-offset: .15em;
text-decoration-color: var(--color-secondary-1);
}
</code></pre>
</details>
This is the HTML snippet I use on the home page to show how I have customised the hover states. I want to point out three points about it:
details element definitionsummaryA basic unstyled version of it would look like this:
a:hover {
text-decoration: underline;
text-decoration-thickness: .1em;
text-underline-offset: .15em;
text-decoration-color: var(--color-secondary-1);
}
Styling it obviously makes it a little nicer, something like below—which is the same one I use on the homepage:
a:hover {
text-decoration: underline;
text-decoration-thickness: .1em;
text-underline-offset: .15em;
text-decoration-color: var(--color-secondary-1);
}
That’s all. As I said, no JavaScript needed. All can be styled with CSS, as above.