<section class="change">
  <h2>Change Title</h2>
  <p>
    Summary Text
  </p>
  <details>
    <summary>
      Version Details
    </summary>
    <ul>
      <li>a</li>
      <li>list</li>
      <li>of</li>
      <li>changes</li>
    </ul>
  </details>
</section>
.change {
  font-size: 1.5em;
  
  h2 {
    font-weight: bold;
    margin: .5em 0;
  }

  p {
    font-size: 1.125em;
    margin: .5em 0;
  }
  
  details {
    summary {
      cursor: pointer;
    }
    
    @media not all and (prefers-reduced-motion: reduce) {
      ul {
        transition: .5s;
        margin: 0;

        max-height: 0;
        overflow: hidden;
        opacity: 0;
      }

      &[open] {
        ul {
          max-height: 100vh;
          overflow: scroll;
          opacity: 1;
        }
      }
    }
  } 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.