Collaps - Dots, Pure CSS

Pure CSS Collaps-Panel, no Javascript

by Aaron von Schassen

HTML

<div class="main">
   <div></div>
   <input type="radio" name="collapse"><a> 1995</a><br>
     <p>
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum perpetua ne ius. Ex veritus fierent pro, nec in inani mollis vituperatoribus. Cu sea nusquam intellegebat, ius alii oporteat adipisci ut.
     </p>
     
     
   <div></div>
   <input type="radio" name="collapse"><a> 1996</a><br>
   <p>
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute    oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum perpetua ne ius. Ex veritus fierent pro, nec in inani mollis vituperatoribus. Cu sea nusquam intellegebat, ius alii oporteat adipisci ut.
     </p>
     
     
     <div></div>
     <input type="radio" name="collapse"><a> 1997</a><br>
   <p>
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute    oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum perpetua ne ius. Ex veritus fierent pro, nec in inani mollis vituperatoribus. Cu sea nusquam intellegebat, ius alii oporteat adipisci ut.
     </p>
     
     
     <div></div>
     <input type="radio" name="collapse"><a> 1998</a><br>
     <p>
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute    oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum perpetua ne ius. Ex veritus fierent pro, nec in inani mollis vituperatoribus. Cu sea nusquam intellegebat, ius alii oporteat...

CSS

* {
  font-family: Arial;
  margin: 0;
  padding: 0;
}

.main {
  width: 70%;
  background-image: -webkit-linear-gradient(left, black, black 7px, transparent 7px, transparent);
  background-repeat: no-repeat;
  background-size: 7px calc(100% - 50px);
  background-position: 8px 25px;
  margin-left: 5px;
}

.main > p {
  display: none;
  padding: 10px 0px 0px 40px;
  z-index: 0;
}

.main a {
  position: relative;
  bottom: 6px;
  right: 15px;
}

.main > div {
  background: black;
  padding: 10px;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  border: 0;
  position: relative;
  top: 24px;
  z-index: 3;
}

input {
  width: 40px;
  height: 25px;
  opacity: 0;
  position: relative;
  z-index: 14;
  left: 30px;
}

input:hover {
  cursor: pointer;
}

input:checked + a + br + p {
  display: block;
}

input:last-of-type:checked + a + br + p {
  background-color: #f3f5f6;
  position: relative;
  bottom: 10px;
  padding-top: 20px;
}