Ducks

dabblet.css

/**
 * Ducks
 */

body {
	background-color: #162682;
	color: #FFF;
	font-family: Arial;
	padding: 30px;
}

div.hideytimes {
	position: relative;
	width: 550px
}

.hideytimes h2 {
	border-bottom: 1px dotted;
	background-color: black;
}

.hideytimes input[type=checkbox] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
}

.hideytimes label {
   cursor: pointer;
   position: relative;
   display: block;
   padding-left: 30px
}
.hideytimes label:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 10px;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-top: -8px;
}
.hideytimes input[type=checkbox]:checked ~ h2 label:before {
  border-left: 8px solid transparent;
  border-top: 8px solid white;
  border-right: 8px solid transparent;
  margin-left: -4px;
  margin-top: -4px
}
.hideytimes p {
  max-height: 0;
  overflow: hidden;
  padding-left: 30px;
  background-color: black;
  transition: max-height 0.4s ease;
}
.hideytimes div {
	display: inline;
	background-color: red;
}
.hideytimes input[type=checkbox]:checked ~ h2 ~ p {
  max-height: 1000px;
}

dabblet.html

<div class="hideytimes">
<input type="checkbox" id="faq-1">
<h2><label for="faq-1">Is it time for awesome stuff?</label></h2>
<p>No, not really.</p>
</div>

<div class="hideytimes">
<input type="checkbox" id="faq-2">
<h2><label for="faq-2">Well how about ducks? Is it time for ducks?</label></h2>
<p>It can be duck time if you REALLY want it to be. I guess.</p>
<div>Bonus div in the middle.</div>
<p>No actually I thought about it some more and it can't. I'm sick of the way you treat me and I'm going to stay at my mother's for a while. Why do you always have to do this? Why does everything have to be about ducks with you? I've had just about enough of "duck this" and "duck that" and "falcon duck punch". I've seen enough ducks to last me a hundred lifetimes, and I've only known you for twenty minutes. There is something seriously wrong with you. I think you should get help. No, not from a duck doctor. From a psychiatrist of some kind. Fine, a duck psychiatrist. No, it's not funny. Shut the fuck up.</p>
</div>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}