纯css手风琴

本文针对的是纯css的手风琴，话不多说直接看代码：

html部分：

<div class="togglebox">
  
  <input id="toggle1" type="radio" name="toggle" />
  <label for="toggle1">css手风琴</label>
  
  <section id="content1">
    <p>
      手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
    <p>
     手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
  </section>
  
  <input id="toggle2" type="radio" name="toggle" />
  <label for="toggle2">css手风琴</label>
  
  <section id="content2">
    <p>
    手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
    <p>
     手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
  </section>
  
  <input id="toggle3" type="radio" name="toggle" />
  <label for="toggle3">css手风琴</label>
  
  <section id="content3">
    <p>
     手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
    <p>
      手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
  </section>

  <input id="toggle4" type="radio" name="toggle" />
  <label for="toggle4">css手风琴</label>
  
  <section id="content4">
    <p>
手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
    <p>
     手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴手风琴
    </p>
  </section>

</div>

<div style="text-align:center;clear:both">
</div>

css部分：

@import url("css/font-awesome.css");
* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font: 16px/1 'Open Sans', sans-serif;
  color: #555;
  background: #e5e5e5;
}

body {
  padding: 50px;
}

.togglebox {
  width: 400px;
  margin: 0 auto;
  background: #fff;
  transform: translateZ(0);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

label[for*='1'] {
  border: 0;
}

label:after {
  content: '\f078';
  position: absolute;
  top: 0px;
  right: 20px;
  font-family: fontawesome;
  transform: rotate(90deg);
  transition: .3s transform;
}

section {
  height: 0;
  transition: .3s all;
  overflow: hidden;
}

#toggle1:checked ~ label[for*='1']:after,
#toggle2:checked ~ label[for*='2']:after,
#toggle3:checked ~ label[for*='3']:after,
#toggle4:checked ~ label[for*='4']:after {
  transform: rotate(0deg);
}

#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3,
#toggle4:checked ~ #content4 {
  height: 200px;
}

p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.5;
}

效果(具体效果可根据本网站的 code online进行在线预览）：

• 洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
• 蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
• 适用于新款车载手机支架无线器快充智能自动感应汽车
• 皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴