今天來寫滿常見的收合區塊
一樣先把架構放好

/*引入material icon*/
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet">
<div class="centered-wrapper">
  <div class="according-div">
    <input type="radio" id="list-1">
    <label for="question">question-1</label>
    <section>
      <p>放假字進來</p>
    </section>
  </div>
  <div class="according-div">
    <input type="radio" id="list-2">
    <label for="question">question-2</label>
    <section>
      <p>放假字進來</p>
    </section>
  </div>
  <div class="according-div">
    <input type="radio" id="list-3">
    <label for="question">question-3</label>
    <section>
      <p>放假字進來</p>
    </section>
  </div>
</div>

然後設定基本的樣式

body {
  margin: 0;
  padding: 0;
  /*線性漸層+轉角度的寫法*/
  background: linear-gradient(260deg, #ffcb85 20%, #fdf5c9 100%);
  height: 100vh;
}

.centered-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
}

.according-div {
  background: #fff;
  text-indent: 20px;
}

.according-div label {
  padding: 20px 0px;
  display: block;
}

.according-div input {
  position: absolute;
  right: 15px;
  margin:20px 0px 0px 0px;
  /*   display:none;    */
}

.according-div section p {
  padding: 20px 20px;
}

.according-div section {
  box-shadow: inset 0px 0px 5px #666666;
  height:0;
  overflow:hidden;
}

當選擇到 input 時，改變僞元素的內容
並在選擇到時，增加一個將高度打開的漸變效果

.according-div input:checked ~ label::before{
  content: '\e5ce';
}

.according-div label::before{
  font-family: "Material Icons";
  content: '\e5cf';
  display:block;
  position: absolute;
  margin-top:8px;
  right: 8px;
  color:#666666;
  font-size:1.8rem;
}

.according-div input:checked ~ section{
  height:auto;
  padding:20px;
}

本次轉移陣地到 jsfiddle
今天的 codepen有點怪怪的QQ
https://jsfiddle.net/kingofturnip/fy5Ld321/50/