barraponto · April 12, 2012 16:33
diff --git a/dabblet.css b/dabblet.css
 /**
 * pure css accordion
 */
 body { width: 240px; }
 ul { padding: 0; margin: 0; }
 h2 { margin-top: 0; margin-bottom: 0.25em; }
 h2 a { text-decoration: none; color: #905; }
 li p { transition: height 1.5s; height: 0; overflow: hidden; margin: 0; }
 li:target p { height: 81px; }
 /* unfortunatelly, I can't use height: auto; 
 /* because it is not supported by css transitions yet. 
 /* see http://oli.jp/2010/css-animatable-properties/ */
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <ul>
 <li id="a"><h2><a href="#a">click me!</a></h2><p>this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text.</p></li>
 <li id="b"><h2><a href="#b">no, click me!</a></h2><p>this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text.</p></li>
 <li id="c"><h2><a href="#c">click me, i tell you!</a></h2><p>this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text.</p></li>
 </ul>
diff --git a/settings.json b/settings.json
 {"view":"separate","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* pure css accordion
	*/
	body { width: 240px; }
	ul { padding: 0; margin: 0; }
	h2 { margin-top: 0; margin-bottom: 0.25em; }
	h2 a { text-decoration: none; color: #905; }
	li p { transition: height 1.5s; height: 0; overflow: hidden; margin: 0; }
	li:target p { height: 81px; }
	/* unfortunatelly, I can't use height: auto;
	/* because it is not supported by css transitions yet.
	/* see http://oli.jp/2010/css-animatable-properties/ */
	<!-- content to be placed inside <body>…</body> -->
	<ul>
	<li id="a"><h2><a href="#a">click me!</a></h2><p>this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text.</p></li>
	<li id="b"><h2><a href="#b">no, click me!</a></h2><p>this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text.</p></li>
	<li id="c"><h2><a href="#c">click me, i tell you!</a></h2><p>this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text. this is filler text.</p></li>
	</ul>