Accordian

dabblet.css

/* Accordian */
body {
	background: #eee;
	font-family: "Gill Sans MT", sans-serif;
}
#container { 
	background: transparent; 
	width: 500px; 
	margin: 25px auto;
}
#container label {
	font-variant:small-caps;
	position:relative;
	padding: 10px;
	z-index:20;
	height:30px;
	cursor:pointer;
	font-weight:bold;
	line-height:30px;
	font-size:18px;
	background:#ddd;
	display:block;
	text-shadow:1px 1px #fff;
	/*border:1px black solid;*/
	box-shadow: 0px 1px 10px #333;
}
#container label:hover {
	background:#fff;
}
#container input:checked + label,
#container input:checked + label:hover {
	background:#ccc;
}
#container label:hover:after,
#container input:checked + label:hover:after {
	content:'⇧';
	color:#aaa;
	position:absolute;
	width:20px;
	margin-left:10px;
	top:10px;
	-webkit-transform:rotate(180deg);
}
#container input:checked + label:hover:after {
	-webkit-transform: rotate(0deg);
}
#container input {
	display:none;
}
#container article {
	margin:-1px 5px 0 5px;
	overflow:hidden;
	height:0px;
	position:relative;
	z-index:10;
	/*border-left:1px solid black;
	border-right:1px solid black;*/
	box-shadow: 0px 1px 10px #333;
	-webkit-transition: height 0.3s ease-in-out;
}
#container input:checked ~ article {
	-webkit-transition: height 0.5s ease-in-out;
}
#container article p {
	color: #333;
	font-size:14px;
	line-height:23px;
	padding:10px;
	font-style:italic;
}
#container input:checked ~ article.acText {
	height:100px;
}

dabblet.html

<div id="container">
	<div id="about">
		<input id="ac1" name="accordian1" type="checkbox" />
		<label for="ac1">About Us</label>
		<article class="acText">
			<p>This is a post about us. It describes who we are and what we do. You can make it disappear easily and reappear just as easily.
			</p>
		</article>
	</div>
	<div id="content">
		<input id="ac2" name="accordian1" type="checkbox" />
		<label for="ac2">Site Content</label>
		<article class="acText">
			<p>This is a post about our site content. It shows what kind of site we are. You can make it disappear easily and reappear just as easily.
			</p>
		</article>
	</div>
	<div id="contact">
		<input id="ac3" name="accordian1" type="checkbox" />
		<label for="ac3">Contact Us</label>
		<article class="acText">
			<p>This is how you contact us. Email is best, but there is a phone number as well. You can make it disappear easily and reappear just as easily.
			</p>
		</article>
	</div>
	<div id="purchase">
		<input id="ac4" name="accordian1" type="checkbox" />
		<label for="ac4">Purchase Stuff</label>
		<article class="acText">
			<p>Buy our stuff here. We'll deliver next day with free shipping. You can make it disappear easily and reappear just as easily.
			</p>
		</article>
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}