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.
View Compiled
// 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;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.