css实现手风琴效果

源码

<div class="accordion">
  <input id="toggle1" type="radio" class="accordion-toggle" name="toggle" />
  <label for="toggle1">Pure CSS Accordion 1</label>
  <section>
    <p>
    Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
    Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
  </section>
</div>
<div class="accordion">
	<input id="toggle2" type="radio" class="accordion-toggle" name="toggle" />
	<label for="toggle2">Pure CSS Accordion 2</label>
	<section>
		<p>
			Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder
			bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
		</p>
		<p>
			Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs
			pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
		</p>
	</section>
</div>
<div class="accordion">
	<input id="toggle3" type="radio" class="accordion-toggle" name="toggle" />
	<label for="toggle3">Pure CSS Accordion 3</label>
	<section>
		<p>
			Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder
			bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
		</p>
		<p>
			Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs
			pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
		</p>
	</section>
</div>

<style>
* {
  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;
}
.accordion {
  transform: translateZ(0);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background: #fff;
}
.accordion > .accordion-toggle {
  position: absolute;
  opacity: 0;
  display: none;
}
.accordion > 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;
}
.accordion > label:after {
  content: "❯";
  position: absolute;
  top: 0px;
  right: 20px;
  transform: rotate(90deg);
  transition: 0.3s transform;
}
.accordion > section {
  height: 0;
  transition: 0.3s all;
  overflow: hidden;
}
.accordion > .accordion-toggle:checked ~ label:after {
  transform: rotate(0deg);
}
.accordion > .accordion-toggle:checked ~ section {
  height: 200px;
}
.accordion > section p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.5;
}
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！