HTML details.

published on August 4, 2023

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.

The element

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 definition
providing a summary
crafting the content to be showed after the open action

A basic unstyled version of it would look like this:

Custom hover states


  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:

Custom hover states


  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.