Simple CSS3 Accordian Tutorial
...Without using :target. Of all the things I've built, this has got to be one of my favorites. This is just super cool to be able to have all this "click" functionality with CSS alone. This is the cleanest/easiest css3 accordian you'll likely find. It's perfect for a FAQs/Question & Answwer page. After building it I was saddened to discover that I was not the first. However, what I did do was solve/accomplish the following desirable attributes.
- Pure CSS - No JS
- My dead simple coding style
- CSS3 transitions with simulated "auto height" via "max-height"
- Plus/Minus signs and content toggle onClick
- Provided option to have one or more content areas open by default via html "checked" attribute in input tag or via pure CSS
- Smooth and even animation in both directions
- Provided semantically coded version
- Pixel perfect performance in all modern browsers IE10+
The CSS
#accordian {
margin:40px auto;
width:600px;
background:#fff;
border:1px solid #000;
border-radius:6px;
padding:20px 25px 15px;
box-shadow:0 3px 8px #333;
-webkit-text-size-adjust:none;
}
#accordian input {
display:none;
}
#accordian label {
display:inline-block;
cursor:pointer;
background:url(minus-sign.png) 0 3px no-repeat;
padding:0 0 0 17px;
text-shadow:0 2px 3px #999;
font-weight:bold;
}
#accordian p {
margin:5px 20px;
max-height:0;
overflow:hidden;
-moz-transition:.75s;-webkit-transition:.75s;-o-transition:.75s;transition:.75s;
}
#accordian input:checked + p {
max-height:220px;
}
#accordian input:checked + p:before {
position:absolute;
content:'';
margin:-23px 0 0 -21px;
height:14px;
width:14px;
padding:1px;
background:#fff url(plus-sign.png) 1px 1px no-repeat;
}
The HTML
<div id="accordian"> <label for="toggle1">Click For More Info</label> <input type="checkbox" id="toggle1"> <p>Some Content</p> <label for="toggle2">Click For More Info</label> <input type="checkbox" id="toggle2"> <p>Some Content</p> <label for="toggle3">Click For More Info</label> <input type="checkbox" id="toggle3"> <p>Some Content</p> </div>
