How to Create a Content Accordion in Pure CSS3 [Tutorial]
![How to Create a Content Accordion in Pure CSS3 [Tutorial]](http://designmodo.com/wp-content/uploads/2012/02/preview1.png "How to Create a Content Accordion in Pure CSS3 [Tutorial]")
Difficulty: Intermediate
Estimated Completion Time: 45 mins
Today’s tutorial we will learn how to create a pure CSS3 content accordion based on the Futurico UI Pro by Vladimir Kudinov. This will work on all browsers and devices that support the :target selector.
Step 1 – Basic HTML Markup
Let’s create three divs with a different id and each div will have a link with the class of tab and a div with the class of content.
To be able to style and open the accordion when we click on it we need to use the :target selector. The target selector will only work if we will have a link that points to an id and when we click on that link the id becomes the target element.
<div class="accordion"> <div id="tab-1"> <a href="#tab-1" class="tab">Option One</a> <div class="content"> Content Here </div> </div> <div id="tab-2"> <a href="#tab-2" class="tab">Option Two</a> <div class="content"> Content Here </div> </div> <div id="tab-3"> <a href="#tab-3" class="tab">Option Three</a> <div class="content"> Content Here </div> </div> </div>
Step 2 – Accordion Basic Layout
We’ll start by adding some CSS reset styles to remove all the margins, paddings and borders.
.accordion,.accordion div,.accordion h1,.accordion p,.accordion a,.accordion img,.accordion span,.accordion em,.accordion ul,.accordion li {
margin: 0;
padding: 0;
border: none;
}
And then we’ll give a fixed 300px width (290px + 5px margin left + 5px padding right), background color, rounded corners and some shadows.
.accordion {
width: 290px;
padding: 1px 5px 5px 5px;
background: #141517;
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
-moz-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
box-shadow: 0px 1px 0px rgba(255,255,255, .05);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
Step 3 – Styling the Tab Header
Now let’s start styling the default tab header with some CSS3 gradients, shadows, rounded corners and some basic CSS properties (font, padding, color, etc).
.accordion .tab {
display: block;
height: 35px;
margin-top: 4px;
padding-left: 20px;
font: bold 12px/35px Arial, sans-serif;
text-decoration: none;
color: #eee;
text-shadow: 1px 1px 0px rgba(0,0,0, .2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
}
And then we need to add a hover and active style. We’ll change the text and the gradient color to a green one.
.accordion .tab:hover,
.accordion div:target .tab {
color: #2b3b06;
text-shadow: 0px 1px 0px rgba(255,255,255, .15);
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
}
Step 4 – Display and Hide the Content
In this step we will hide all the content and only show it when you click on a tab. To hide we’ll use the display: none; property and the display: block; for the target div. We’ll also add some transition animations to make it look better and a 100px height for the target div.
.accordion div .content {
display: none;
margin: 5px 0;
}
.accordion div:target .content {
display: block;
}
.accordion > div {
height: 40px;
overflow: hidden;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.accordion > div:target {
height: 100px;
}
Step 5 – The Tabs Content
HTML Markup
Let’s add some content to the tabs. We will create a blog post preview with a title, paragraph text, some images and some meta info. You can change the markup as you like, this is optional, just to make this accordion more complete.
<div class="content"> <img src="img/post-img-1.png" alt=""> <h1>The Big Elephant in the City</h1> <span>5 days ago</span> <em class="bullet"></em> <span>17 comments</span> <p>Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts cutting-edge restaurants and boutiques.</p> <ul> <li><img src="img/thumb-1.png" alt=""></li> <li><img src="img/thumb-2.png" alt=""></li> <li><img src="img/thumb-3.png" alt=""></li> </ul> </div>
CSS Styles
The content styles are all basic except the CSS3 stuff, I recommend you to search the properties that you don’t understand on Google and you will find a lot of information about them.
.accordion .content h1 {
color: white;
font: 18px/32px Arial, sans-serif;
}
.accordion .content p {
margin: 10px 0;
color: white;
font: 11px/16px Arial, sans-serif;
}
.accordion .content span {
font: italic 11px/12px Georgia, Arial, sans-serif;
color: #4f4f4f;
}
.accordion .content em.bullet {
width: 5px;
height: 5px;
margin: 0 5px;
background: #6b8f1a;
display: inline-block;
-webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
-moz-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.accordion .content ul li {
list-style: none;
float: left;
margin: 5px 10px 5px 0;
}
.accordion .content img {
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
-moz-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
box-shadow: 2px 2px 6px rgba(0,0,0, .5);
}
Also change the div height to 360px.
.accordion > div:target {
height: 360px;
}
Conclusion
We have finished this Pure CSS3 Content Accordion. Hope you like it and don’t forget to live some feedback or any question you have in the comments.
Want this freebie? Enter your email and get it now!
Please enter your email address below and click the download button. The download link will be sent to you by email.
Valeriu Timbuc
Valeriu is a 19 years old boy from Lisbon, Portugal. He started learning Web Design / Development one year ago and now he have some solid knowledge about it. Check out his Portfolio and don’t forget to follow him on Twitter.
Stay in Touch with Us
Sponsors
Kreativ Theme
February 14, 2012 at 1:59 pm
This is a great tut specially if you want to create website for mobile devices … :)
Adrian
February 14, 2012 at 2:06 pm
that’s right, we tested on iPad and iPhone, all is ok…
Martin
February 14, 2012 at 2:58 pm
Great slide. Just a shame that, as usual, IE (9) doesn’t play ball :-(. There the slides jump and do not smoothly slide. But still very usefull and seeing as I am currently in need of suchs a slide I might give it a go:-).
Valeriu
February 14, 2012 at 4:52 pm
You can easily make it work with jquery if you want to add support for others browsers.
Hannah
February 15, 2012 at 6:45 am
Thanks for the great tutorial!
Is there anyway of closing the accordion tab, if the tab is clicked again after reading the section?
Valeriu
February 15, 2012 at 12:02 pm
Yes, you can do that with jQuery.
Nora Reed
February 15, 2012 at 1:25 pm
One of my friend making websites based on mobiles and ipad devices !! i’m gonna share this post to him i hope he will get something new from this post :)
Jeremy
February 15, 2012 at 5:48 pm
I’m asking for too much, probably, but it would be just fantastic if there was some way the content could determine the height of the targeted div, so that some of them could contain text only, in different amounts, and others images + text.
Valeriu
February 15, 2012 at 6:23 pm
You can do that by giving a fixed height to each tab.
Ex:
#tab1 { height: 350px; }
#tab2 { height: 100px; }
#tab3 { height: 200px; }
Adam
February 15, 2012 at 10:40 pm
Why does the browser window jump every time you click on one of the tabs? That could get very frustrating for users.
Valeriu
February 15, 2012 at 11:05 pm
Hi Adam,
The only fix I know for that is using jQuery for the click event.
Beben Koben
February 18, 2012 at 8:52 am
so nice…this is good one accordion with css3
ty for coding ☺
Prodyot
February 18, 2012 at 9:11 pm
Hi Valeriu
This is another awesome tutorial.
And, the final product is very useful too.
The fact that it is in CSS so it will show up in all the modern browsers.
I have a request-
Can you add a “recoil” feature to the first and the last tab so that when I reach the last tab if I click it again then it will recoil.
The same with the first tab.
When the tabs remain open it becomes frustrating to look at it at times.
Moreover, the recoil with “easing” will be a better option.
Thanks for the tutorial.
Valeriu
February 18, 2012 at 11:16 pm
Hi Prodyot,
To implement this “recoil” you can use jQuery.
reus
February 20, 2012 at 8:00 am
thanks for this great tutorial. it is very helpful.
more power!