Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure CSS3 Accordion System inspired by the CSS Ninja
/*
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;
}
}
<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>
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment