Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/dabblet.css

Forked from abitgone/dabblet.css
Created September 5, 2012 10:11
Show Gist options
  • Save mr-stezz/3634484 to your computer and use it in GitHub Desktop.
Save mr-stezz/3634484 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
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;
}
@media screen and (min-width:763px) {
.filters-collapse,
.filters-intro { display: none; }
.filters,
.collapsed .filters,
.expanded .filters { display: block; }
}
Raw
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>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment