Pure CSS3 Accordion System inspired by the CSS Ninja

dabblet.css

/*
 Pure CSS3 Accordion System inspired by the CSS Ninja
 */

body{ font-family:sans-serif; background:#f9f9f9; }

dl {
  padding: 10px;
}

dl dt {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px solid #cccccc;
  margin: 0;
  position:relative;
  z-index:10;
  
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
}
	
dl dt a {
  color: #888;
  text-shadow:0 1px 0 white;
  font-weight: bold;
  text-decoration: none;
  padding: 10px;
  display: block;
}
		
dl dd {
  margin: 0;
  height: 0;
  overflow: hidden;
  color:#aaa;
  border-radius:0 0 5px 5px;
  box-shadow:inset 0 -1px 5px #ccc;
  transform:translateZ(0);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
  -webkit-transition:height 0.2s ease-in-out, margin 0.1s ease-in-out;
}
	
dl dd p {
  padding: 10px;
  margin: 0;
}
		
dl dd:target {
  height: auto;
}
 
@media (-webkit-transition) {
  dl dd:target {
  	height: 6.667em;
	margin:-5px 0 5px 0;
  }
}

dabblet.html

<dl>
	<dt><a href="#Section1">Section 1</a></dt>
	<dd id="Section1">
		<p>
			Lorem ipsum dolor sit amet...
		</p>
	</dd>
	<dt><a href="#Section2">Section 2</a></dt>
	<dd id="Section2">
		<p>
			Lorem ipsum dolor sit amet...
	</dd>
	...
</dl>

settings.json

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