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

<details>
  <summary>What's a Po' Boy?</summary>
  A po' boy (also po-boy, po boy) is a traditional sandwich from Louisiana. It almost always consists of meat, which is usually roast beef or fried seafood, often shrimp, crawfish, fish, oysters or crab.
</details>

<details>
  <summary>How do I get to New Orleans?</summary>
  Use Google Maps.
</details>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

:root {
  --right-arrow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTJsLTktOHY2aC0xNXY0aDE1djZ6Ii8+PC9zdmc+");
  --bottom-arrow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMjRsLTgtOWg2di0xNWg0djE1aDZ6Ii8+PC9zdmc+");
}

body {
  font-family: 'Open Sans', sans-serif;
}
details {
  padding: .3em;
  margin: 1rem;
}
summary {
  font-size: 2em;
  line-height: 1.2;
  user-select: none;
  list-style-image: var(--right-arrow);
}
summary::-webkit-details-marker {
  background: var(--right-arrow);
  color: transparent;
}

details[open] {
  background-color: #eee;
}

details[open] summary {
  list-style-image: var(--bottom-arrow);
  margin-bottom: .3em;
}
details[open] summary::-webkit-details-marker {
  background: var(--bottom-arrow);
  color: transparent;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.