Accordion

HTML, CSS, with CHECKBOX elements

by Ovi Stof

HTML

<h1>Accordion</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  <input type="checkbox"  id="acorder1" /> 
  <label for="acorder1" >Integer ac posuere sapien</label>
<div class="acorder"><img style="float:right; width:100px;" src="https://www.w3schools.com/css/paris.jpg"/>
<p>Nam aliquam, sem hendrerit efficitur suscipit, neque felis facilisis augue, sit amet dictum lorem mi vel dolor. Integer commodo lorem nec consectetur feugiat. Sed imperdiet massa eu odio auctor pulvinar. Donec cursus lectus purus, ac ultrices nulla faucibus non. Vivamus semper tellus aliquam, tincidunt lacus et, egestas mauris. Proin id diam eros. Morbi cursus vehicula magna volutpat tincidunt. </p>
</div>
<p>Sed elementum enim odio, sed pellentesque libero venenatis condimentum. Morbi vitae ornare tellus, vel tempor magna. Nullam pretium, risus eu ultricies consectetur, mi dolor convallis lacus, a consequat ipsum arcu sit amet lectus.</p>
  <input type="checkbox"  id="acorder2" /> 
  <label for="acorder2" >Nunc facilisis lobortis varius</label>
<div class="acorder">
<p>Sed dictum nunc a auctor dignissim. Ut massa lacus, elementum sed maximus ut, interdum eu nisi. Pellentesque arcu dui, euismod et ante sed, volutpat consequat neque. Maecenas arcu nulla, molestie sed justo eu, bibendum luctus dui. Pellentesque dapibus diam in magna vulputate commodo. Nunc vehicula turpis a urna rutrum eleifend.</p>
</div>
  <input type="checkbox"  id="acorder3" /> 
  <label for="acorder3" >Praesent vestibulum libero ut varius dapibus</label>
<div class="acorder">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam tempus congue ultrices. Aliquam vitae sapien augue. </p><p> Donec volutpat dui nec turpis convallis porta. Donec laoreet porta dapibus. Donec efficitur ante dolor, a vehicula ante euismod at.</p>
<img style="display:block;margin: 0 auto;" src="https://www.w3schools.com/css/img_5terre_wide.jpg"/>
</div>
<p>Ut dignissim velit...

CSS

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
body {font-family:"Tahoma";}
input[id^="acorder"]{display: none;}
input[id^="acorder"] + label {
  display: block;
  width: 95%;
  margin: 0 auto;
  padding: 5px 10px;
  background: RGBA(10,50,100,1);
  box-shadow: 5px 5px 5px white;
  color: #fff;
  text-align: left;
  font-size: 22px;
  border-top:1px dotted white;
  border-left:1px dotted white;	
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
}
input[id^="acorder"] + label:hover {background:#181f2d;}
input[id^="acorder"] + label:before {content:"\f0fe";font-family:fontAwesome;float:left;font-size:1em;margin: 0 10px 0 0; padding:0;}
input[id^="acorder"] + label:after {content:"\f150";font-family:fontAwesome;float:right;font-size:1em;margin:0;padding:0;}
input[id^="acorder"]:checked + label {color: #fff; background: RGBA(50, 150, 150, 1); border-top:0px dotted white; border-left:0px dotted white; }
input[id^="acorder"]:checked + label:hover {background:#181f2d;}
input[id^="acorder"]:checked + label:before {content:"\f146";font-family:fontAwesome;color:#177fd1;}
input[id^="acorder"]:checked + label:after {content:"\f151";font-family:fontAwesome;color:#177fd1;}
input[id^="acorder"] ~ .acorder {
  width: 90%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 10px auto 0; 
  padding: 10px; 
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: all .9s;
}
input[id^="acorder"]:checked + label + .acorder { height: auto; opacity: 1; padding: 10px;}
p {text-align:justify;}
img {margin:5px;}