details
  summary
    em CSS-only
    | slide-in animation using 
    code margin-top
    |  (inefficient)
.content
  p Box-shadow is used to highlight the collapsed area.
  p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
  p Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.

// Hiding logic

.content {
  // Hiding overflow is necessary for the slide-in effect.
  overflow: hidden; // Spoils position:sticky on descendant elements if there is any.
  overflow: clip; // New to Firefox 81, Chrome 90.

  > *:first-child {
	  transition: margin-top 500ms ease-out;

    details:not([open]) + & {
      margin-top: -20em;
    }
  }
}


// Styling

details {
  background-color: wheat;
  border: 2px solid darkgoldenrod;
  border-radius: .2em;
}

.content {
  display: flow-root; // Keep margin within borders
  background-color: lightgoldenrodyellow;
  box-shadow: inset 0 0 0 2px goldenrod; // Border
  border-radius: .2em;
}

details {
  width: fit-content;
  margin: 0 auto;
}

summary {
  padding: 0.2em 0.5em;
}

p {
  margin: 0.6em;
}

summary em {
  display: inline-block;
  padding: .1em 1em;
  margin-right: 0.5em;
  background-color: goldenrod;
  color: green;
  border-radius: 1em;
}

body {
  margin: 2em 4em;
}