Untitled

dabblet.css

html {
	font-family: "Helvetica Neue", sans-serif;
}
.container {
	border: 1px solid rgba(0,0,0,0.25);
	border-radius: 0.375em;
}
.container > div {
	padding: 0.75em 1.5em;
}
.filters-intro a {
	float: right;
}
.filters,
.filters-collapse {
	text-align: center;
}
.filters {
	border-top: 1px solid rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
.collapsed .filters,
.collapsed .filters-collapse,
.expanded  .filters-intro {
	display: none;
}

dabblet.html

<div class="container collapsed" id="vehicle-search-filters">
	<div class="filters-intro">
		<p>Any Audi A5. <a href="#vehicle-search-filters" data-classtoggle-class="collapsed" data-classtoggle-altclass="expanded">Expand Filters</a></p>
	</div>
	<div class="filters">
		<p>Here be some filters.</p>
		<p>Here be some filters.</p>
		<p>Here be some filters.</p>
	</div>
	<div class="filters-collapse">
		<a href="#vehicle-search-filters" data-classtoggle-class="collapsed" data-classtoggle-altclass="expanded">Close Filters</a>
	</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://raw.github.com/abitgone/jQuery-Plugins/master/ClassToggle/abitgone-classtoggle.js"></script>

settings.json

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