Details element CSS example:

Demonstrates the <details> element and CSS rules that tailor the experience.

by Lance Leonard

HTML

<details>
<summary>Expand to view an image</summary>
The Pale Blue Dot - Revisited (2020)
<img src="https://apod.nasa.gov/apod/image/2002/PIA23645PaleBlueDot.jpg" width="600px" alt="Image consists mainly of a light blue field with a shaft of sunlight running diagonally from the top of the frame to the bottom.  A lonely dot is seen about a third of the way down the sunlight shaft.">

<p>This is an updated version of the <em><a href="https://en.wikipedia.org/wiki/Pale_Blue_Dot">Pale Blue Dot</a></em>, a photo taken by Voyager 1 near the planet Saturn on Valentine's Day 1990.</p>  

<p>In the words of astronomer Carl Sagan, this image shows our home.  "That's us... [T]he pale blue dot, the only home we've ever known."</p> 

<p><em>Photo: </em> The Pale Blue Dot (2020 variant), copied from NASA's Astronomy Picture of the Day (APOD), <a href="https://apod.nasa.gov/apod/ap200214.html">14 Feb 2020 entry</a>.<br>Credits: <a href="https://www.nasa.gov/mission_pages/voyager/index.html">Voyager Project</a>, <a href="https://www.nasa.gov/">NASA</a>), and <a href="https://www.jpl.nasa.gov/">JPL-Caltech</a>.</p> 
</details>

CSS

details {
  border:1px solid #fafafc;
  border-radius:4px;
  padding:.5em .5em 0
}
summary {
  font-style:italic;
  background-color:#f5f5f5;
  margin:-.5em -.5em 0;
  padding:.5em
}
.details>summary::before {
  font-style:normal;
  content:"+";
}
details[open] {
  padding:.5em
}
details:hover {
  border:1px solid #ddd;
  box-shadow:#ccc 1px 1px 1px
}