How to Create a Content Accordion in Pure CSS3

Valeriu Timbuc  •  Coding, Tutorials  •  February 14, 2012  •  17 Comments

How to Create a Content Accordion in Pure CSS3 [Tutorial]

Topic: CSS3
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>

Basic HTML Markup

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;
}

Accordion Basic Layout

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);
}

Styling the Tab Header

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;
}

Display and Hide the Content

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;
}

The Tabs Content

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.

Preview

Subscribe to Download

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Futurico PRO

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on Twitter at @vtimbuc or visit his web site at vtimbuc.net.

17 Comments
  1. Kreativ Theme Feb 14, 1:59 pm

    This is a great tut specially if you want to create website for mobile devices … :)

    Reply
    0
  2. Martin Feb 14, 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:-).

    Reply
    0
    • Valeriu Feb 14, 4:52 pm

      You can easily make it work with jquery if you want to add support for others browsers.

      Reply
      0
  3. Hannah Feb 15, 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?

    Reply
    0
  4. Nora Reed Feb 15, 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 :)

    Reply
    0
  5. Jeremy Feb 15, 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.

    Reply
    0
    • Valeriu Feb 15, 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; }

      Reply
      0
  6. Adam Feb 15, 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.

    Reply
    +1
    • Valeriu Feb 15, 11:05 pm

      Hi Adam,

      The only fix I know for that is using jQuery for the click event.

      Reply
      0
  7. Prodyot Feb 18, 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.

    Reply
    0
  8. nupur Aug 27, 12:59 pm

    how can we remove tab id from url?

    Reply
    0
  9. Andrew Hutton Oct 10, 11:23 pm

    This is almost exactly what I’m looking for… now, how can a rotate the container by 90 degrees so that the panels slide horizontally, but still have the text & photos read normally (left to right).

    Thanks in advance for any advice you can offer.

    Reply
    0
  10. TheSuperRare Feb 26, 7:24 am

    Hi Valeriu,

    This is a great tutorial! I just have one question and please forgive me if it seems ignorant or just plain silly but how would you go about making more tabs?

    Thank you in advance for your time!

    Reply
    0
  11. prinda May 5, 5:30 am

    It is simple and grate .I have one question if you can help

    How to set the default tab .Mean i want that 2nd tab opened by default or the first one how can i do that . and how can it be made horizontal

    Thanks

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters


Notify me of followup comments via e-mail. You can also subscribe without commenting.