A cup full of used paint brushes, detailing the fibers in the brush

Semantic <details> for the win

I made a mistake and posted this before testing in all browsers. For shame! This behavior is default in the latest versions Google Chrome and Microsoft Edge. Unfortunately, this isn’t default behavior in any of the mobile browsers I tested. For shame!

I’m a huge fan of the details disclosure element and I don’t think we talk enough about the benefits of using semantic HTML elements.

Did you know a details element automatically expands when using the native find functionality? Good luck getting that feature on your 0 height divs or display: none content.

You can try it for yourself in the demo or see the video.

Things to look for:

  1. The count shows 1/3 and cycles through all 3, but only the details element expands to show the highlighted text
  2. On first load and find, the scroll bar only shows 2 instances of the found text, when the div expands, it shows 3

Additional Resources

Posted in: #html by Avatar image of me@ https://danleatherman.com/semantic-details/

Blog image by Michael Dziedzic

Webmentions

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site:

More posts