CSS - Accordion No JS

by Ben Clayton

HTML

<div class="accord">
  <h1>
    This is the Heading which may cover more than one line.
  </h1>
  <p>
    More work is needed to this Accordion solution, the open/close control ideally should be an image or special character. The Character needs two different values, open and closed. The open close function needs implementing with a hidden checkbox and the control is a linked label for the checkbox. The panel open close height can then be transitioned.
  </p>
	<p>
    hjkewhd jehkf jewhfjekwhfwe hfjkwehfjkhewf hwejkfh ejkhf jkewhfkjwehfjk wehf wejkfh jkwehf kjwehf wehf wekhf wejkfh jkwehf jkwehf jwkeh jkwhef jkwhefjkwhefkj wefwehfk
  </p>
</div>

CSS

.control {
  float: right;
  width: 20px;
  background-color: #E0E0E0;
}

.control>* {
  vertical-align: middle;
	text-align: center;
	height:10px;
}
.accord>*:first-child {
	display:flex;
	justify-content:space-between;
	position: relative;
    width: calc(100% - 40px);	
}
.accord>*:first-child:after {
	content:"⇐";
	display:inline-flex;
	width:40px;
	height:100%;
	background:#F0F0F0;
	align-items:center;
	justify-content:center;
  position: absolute;
  right: 0;
	top:0;
  transform: translateX(40px);
}