accordion by only css

by muurraaa

HTML

<dl class="wrapper">
  <input id="check1" type="checkbox">
	<dt><label for="check1">ヘッダー</label></dt>
	<dd>
		<p>私は先刻すでにこの著作方について事の日を使うでた。はたして今朝を説明性もほとんどどんな批評でないかもが取りつかれからいるましには発会やりだでて、全くには死んうましでです。</p>
		<p>先がなりな事はよし当時で引続きだたなかっ。しきりに岩崎さんに招待作物始終お尋ねを乗ったろこの生徒私か鑑定へというご教育たなましだと、その場合は私か畸形考でもたて、大森さんのものに壁の彼らにほとんどご落第と致さてあなた人真似をお病気にしようにようやくご真似にあれないたば、そんなにひょろひょろ講演に云っなけれて来です事にしたいじ。</p>
		<p>場合をはいかに行くがすまましますでませから、いやしくもけっして考えて病気はいっそ広いなけれ事ん。</p>
	</dd>
  <input id="check2" type="checkbox">
	<dt><label for="check2">ヘッダー</label></dt>
	<dd>
		<p>私は先刻すでにこの著作方について事の日を使うでた。はたして今朝を説明性もほとんどどんな批評でないかもが取りつかれからいるましには発会やりだでて、全くには死んうましでです。</p>
	</dd>
</dl>

CSS

.wrapper { margin: 50px auto; width: min(80%, 400px); }
dl { border-bottom: #ddd 1px solid; }
dt { border-top: #ddd 1px solid; }
dd { 
  max-height: 0; overflow: hidden;
  margin: 0; transition: all .3s; 
}
input[type="checkbox"]{ display: none; }
label { 
  cursor: pointer; display: block;
  padding: 0.5em 0; position: relative; z-index: 0;
}
label::after {
	content: "▽"; display: block; line-height: 1;
	position: absolute; top: calc(50% - 0.5em); right: 0; transition: all .3s;
}
input[type="checkbox"]:checked + dt + dd { max-height: 1000px; }
input[type="checkbox"]:checked + dt label::after { transform: rotate(180deg); }