DropDown Spoiler

HTML, CSS, CHECKBOX

by Ovi Stof

HTML

<h1>DropDown Spoiler</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
Vivamus a eleifend leo, sit amet pretium risus.
<div class="drop_info">
  <input type="checkbox" class="activare" id="set-1">
  <label for="set-1">Drop-Down 1</label>
  <div class="drop_caseta">
    Sed cursus lorem id tellus imperdiet molestie. Praesent consequat lectus vel lacus feugiat, nec interdum metus ullamcorper. Ut pulvinar orci nec nulla elementum mollis. Proin quis ipsum sed risus elementum efficitur et ut ipsum. Aliquam vel dolor porttitor, sodales nulla a, viverra sapien. Proin ultrices ornare varius. Morbi ultrices purus sit amet arcu consectetur ullamcorper. Suspendisse auctor porta tellus, at vulputate dolor egestas eu. Proin faucibus libero fermentum dolor semper volutpat in ac enim. Proin placerat leo eget leo elementum placerat. Cras ut tempor sem. Integer id scelerisque sapien. Maecenas nec tincidunt purus. Ut egestas interdum turpis, dignissim interdum nisl porttitor nec. Nam at odio sem.
  </div>
</div>
<div class="drop_info">
  <input type="checkbox" class="activare" id="set-2">
  <label for="set-2">Drop-Down 2</label>      
  <div class="drop_caseta">
    Curabitur vitae faucibus elit, id ullamcorper enim. Nam commodo interdum mollis. Nunc faucibus ex ac eros scelerisque finibus. Sed eu augue quis nisl vehicula semper. Ut enim erat, malesuada quis erat nec, efficitur auctor velit. Vivamus pretium arcu a massa facilisis, ut vehicula sem scelerisque. Fusce ipsum arcu, viverra quis placerat vel, condimentum a tortor. Nunc laoreet consequat nibh, in rhoncus magna accumsan quis. Integer tempor vestibulum nulla, sit amet ultrices lectus tincidunt at.
  </div>
</div>
<div class="drop_info">
  <input type="checkbox" class="activare" id="set-3">
  <label for="set-3">Drop-Down 2</label>      
  <div class="drop_caseta">
    Integer a magna in mi ultrices volutpat. Suspendisse ac finibus dolor. Maecenas at orci lacus. Morbi a ligula vitae velit imperdiet...

CSS

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
.drop_info {
  display: block;
}
.drop_caseta {
  min-width: 90px;
  background: lightgray;
  max-height: 0;
  overflow: hidden;
}
.drop_info label {
  text-decoration: none;
  color: #115721;
  font-weight: bold;
  display:block;
  cursor: pointer;
  padding: 10px 15px;
  background: #51bd6a;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fdbbe), color-stop(100%,#51bd6a));
  background: -moz-linear-gradient(top, #7fdbbe 0%, #51bd6a 100%);
  border:2px solid white;
}
.drop_info label:before {content:"➤"; padding-right:10px;}
.drop_info label:hover {background: #51bd6a;}
.activare:checked ~ label:before {content:"▼"}
.drop_caseta, .drop_info {
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.activare {
  display: none;
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 40px;
  margin: 0 0 0 -15px;
  opacity: 0;
}
.activare:checked ~ .drop_caseta { max-height: 200px;}