@import url(https://fonts.googleapis.com/css?family=Roboto);

body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  color: #fff;

}

.wrapper{
  margin: 10% auto;
  width: 200px;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

label{
	display: block;
	cursor: pointer;
	padding: 10px;
	border: 1px solid #fff;
	border-bottom: none;
	
	background:#0099FF;
	
}

label:hover{
	background: #0000FF;
}

label.last{
  border-bottom: 1px solid #fff;
}

ul ul li{
  padding: 10px;
  background: #59ABE3;
}


input[type=checkbox]{
  position: absolute;
  left: -9999px;
}

input[type="checkbox"] ~ ul{
  height: 0;
  transform: scaleY(0);
}

input[type="checkbox"]:checked ~ ul{
  height: 100%;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1); 
}

input[type=checkbox]:checked + label{
  background: #26C281;
  border-bottom: 1px solid #fff;
}