pureCssSpoiler.css

a.trigger {
  display:inline-block;
	background: #26a69a;
	padding: .4em .8em;
	color: white;
	outline: 0;
	cursor: pointer;
	transition: .3s;
	-webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
}

a.trigger:hover {
	background: #2bbbad;
}

.spoiler {
  background-color:white;
  padding: 0px 30px;
  margin: 10px 0px 0px;
  height: 0px;
	overflow: hidden;
	transition: .3s;
}

a.trigger:not(:focus) label {
	display: none;
}

a.trigger:focus span {
	display: none;
}

a.trigger:focus {
		transform: translate(0, 3em)
		padding: 0;
}

a.trigger:focus + .spoiler {
  height: 200px;
	padding-top: 1em;
}

.spoiler:hover {
	height: 200px;
	padding-top: 1em;
}