A while ago, I wrote about the CSS3 :target
pseudo-class and how can that help you achieve cool results. Today you’ll learn how to create a pretty simple animated CSS3 accordion with its help.
What is an accordion
If you’re designing with usability in mind, then an accordion can be very useful when willing to organize content. The main advantage is packing a lot of content in a reduced space.
The HTML5 part
For this experiment I’ll use one of the new HTML5 elements, it’s about the section
element. When using new HTML5 elements like this one, for older browsers, you need to use the following trick:
<script>document.createElement('section');</script>
To simplify things here, I just used the de facto script for enabling HTML5 elements in Internet Explorer. It’s about Remy Sharp’s html5shiv:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Markup
Enough with theory, let’s see how this actually works:
<div class="accordion">
<section id="one">
<h2><a href="#one">Heading 1</a></h2>
<div>
<p>content</p>
</div>
</section>
</div>
- The
accordion
div wraps the sections that compose the proper accordion. - Each
section
panel contains a title and of course its content.
CSS
section {
display: block;
}
.accordion {
background-color: #eee;
border: 1px solid #ccc;
width: 600px;
padding: 10px;
margin: 50px auto;
border-radius: 3px;
box-shadow: 0 1px 0 #999;
}
.accordion section {
border-bottom: 1px solid #ccc;
margin: 5px;
background-color: #fff;
background-image: linear-gradient(top, #fff, #eee);
border-radius: 5px;
}
.accordion h2,
.accordion p {
margin: 0;
}
.accordion p {
padding: 10px;
}
.accordion h2 a {
display: block;
position: relative;
font: 14px/1 'Trebuchet MS', 'Lucida Sans';
padding: 10px;
color: #333;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2 a:hover {
background: #fff;
}
.accordion h2 + div {
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.accordion :target h2 a:after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.accordion :target h2 + div {
height: 100px;
}
## Result
Browser support
The demo works in browsers that support the :target
pseudo-class. Check compatibility table for more details.
So, if you want to use this for your projects, you must be aware that the above isn’t a cross-browser solution.
Later update: Jquery solution
If the above isn’t a recommended solution to use for production purposes because of support lacking for older browsers, the below solution is a cross-browser one.
Please check the Jquery demo, I hope it will help you!
HTML5 & CSS3 envelope contact form
Sexy CSS3 menu