Hiding Content with Summary/Details HTML Elements


TAGS: html

Reading through Chris Coyier's excellent Advice for Technical Writing I saw him mention the details and summary elements.

Basically a native browser way to tuck some text away into an accordion.

Here's his example from the article:

  <summary>What is the population of New Orleans?</summary>
  <p>According to 2010 Census Bureau estimates, New Orleans' population is made up of approximately 343,829 residents.</p>

This seems like a great way to make a self-administered 'quiz' for your readers as a review at the end of an article.


In the article, Chris seems to recommend the details element to make text opt-in, rather than all visible.

Maybe if you're writing an article and you mention Redux. You don't want to bore the readers who already know it, but also don't want to leave behind readers who don't.

Tucking it away in a details or summary element gives both readers what they need.