Nice Details

There are so many elements I'm excited about in HTML including dialog and details. Both of which have functions we used to heavily rely on JavaScript to achieve. We can be pair these elements with css for endless possibilities.

The details element expands content outside the child summary element when pressed. I've started to use these for a few things including dropdown menus and search forms.

Take the following (simplified) example of pressing an icon to reveal a search form, and another to close the form:

Example

Code

<details>
  <summary>
    <i class="fa-solid fa-magnifying-glas icon"></i>
    <i class="fa-solid fa-times is-open icon"></i>
  </summary>
  <form>
    <input type="search"><button><i class="fa-solid fa-magnifying-glass"></i></button>
  </form>
</details>

Paired with the css that follows, we can show and hide the icon.

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

/* For icons in summary */
.details-disclosure > details > summary > .icon.is-open,
.details-disclosure > details[open] > summary > .icon:not(.is-open) {
  display: none;
}
.details-disclosure > details[open] > summary > .icon.is-open {
  display: block;
}

I love using this technique because it doesn't add any extra JavaScript to the page, but allows for function and styling possibilities without any extra html markup. I'm excited to explore more uses for this element and other ways to style it in css.