利用锚点的:target属性，动态设置锚点内容的高度

input[id='rb0']:checked~.cont0,
input[id='rb1']:checked~.cont1,
input[id='rb2']:checked~.cont2,
input[id='rb3']:checked~.cont3,
input[id='rb4']:checked~.cont4 {
  max-height: 360px;
}

item采用相对定位，为伪元素提供定位参考

label {
  position: relative;
  display: block;
  line-height: 50px;
  font-size: 1.2rem;
  padding: 0 1rem;
  border-top: 1px solid #ddd;
  cursor: pointer;
  background-color: #089;
  color: #fff;
}

item的::before设计一个小方块，旋转45deg后定位于下侧，作为指示器

label::before {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background-color: #089;
}

item的::after使用CSS实体设计一个箭头并选中时旋转

label::after {
  content: '\003E';
  position: absolute;
  right: 1rem;
  top: 0;
  line-height: 50px;
  transition: .5s;
}

每个item通过父相子绝做了小设计；默认情况下，小三角指示器会被后面的item覆盖；但是最后的<footer>没有提升层级，所以导致小三角显示出来。解决方案：设置<footer>为相对定位，进行层级提升