- for i in (1..5)
  .collapse
    input hidden="" type="checkbox" id="collapse_head#{i}" class="collapse_control" /
    label.collapse_head for="collapse_head#{i}" Question
    .collapse_body 
      .inner Answer
View Compiled
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 300vh;
  padding: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Verdana, sans-serif;
}

.collapse {
  & + & {
    margin-top: 16px;
  }  
}

.collapse_head {
  display: block;
  cursor: pointer;
  color: #fff;
  background: #888;
  padding: 1rem;
  user-select: none;
}

.collapse_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  will-change: max-height;

  .inner {
    padding: 1rem;
  }
}

.collapse_control:checked ~ .collapse_body {
  max-height: 100vh;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.