<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam modi rem explicabo labore, vitae, in iste eos excepturi blanditiis tenetur, consectetur quod voluptates sapiente officiis reiciendis doloremque fuga aspernatur facilis.</p>
<details>
  <summary>More Information</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aliquam dignissimos exercitationem quas rem! Placeat incidunt saepe nam totam aliquam!</p>
  <details>
    <summary>A little more information</summary>
    <p>Itaque quia repellendus voluptatibus natus ut eligendi nam iste quasi!</p>
  </details>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, explicabo!</p>
</details>
<details>
  <summary>More Information</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aliquam dignissimos exercitationem quas rem! Placeat incidunt saepe nam totam aliquam!</p>
  <details>
    <summary>A little more information</summary>
    <p>Itaque quia repellendus voluptatibus natus ut eligendi nam iste quasi!</p>
  </details>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, explicabo!</p>
</details>

<p>Voluptatem quidem id alias, laborum reiciendis nobis consectetur culpa quos sed perferendis molestiae repellat dolorum. Praesentium iste similique facilis quae ex aperiam aspernatur labore nostrum, distinctio modi incidunt veniam possimus.</p>
* {
  --bg: rgb(0 0 0 / 0.2);
  --space: 0.5rem;
}

details + details {
  margin-top: var(--space);
}

body {
  max-width: 500px;
  margin: 2rem;
  font: 105%/1.4 system-ui;
}

details {
  padding: var(--space);
  outline: 1px solid var(--bg);
}

details[open] {  
  var(--space);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.