Design Lunatic

CSS3 Accordion

Today, I will explain to you how to make another CSS3 version of a popular javascript widget. In this case, an accordion. You know, those things that unfold when when you click on a link. Follow along, and you will learn how to make a CSS3 accordion.

HTML

<div id="container">
<div id="nav">
<a href="#">Hide All</a>
</div>
	<div class="accordion-head"><a href="#acc1">Accordion 1</a></div>
	<div class="accordion-body" id="acc1">
		<h2>This is the first Accordion content.</h2>
		<div class="accordion-content">
			Lacus augue natoque! Nec mauris sit, lorem penatibus elementum in cras. Dapibus, ridiculus augue elit sit? Lundium ultrices et! Et sed proin? Adipiscing tincidunt? Sed urna scelerisque sit? Urna hac, et nec turpis pulvinar nec elementum elementum a elementum a lectus! Vut, rhoncus tincidunt hac, ac montes proin risus arcu? Mus rhoncus mus in tristique! Arcu nunc mid lundium nisi. Mattis vel tempor sed cum purus a, dis phasellus nisi, risus aliquam dapibus ultrices porttitor phasellus, sagittis, tortor nunc penatibus penatibus sit, scelerisque penatibus diam aliquet ut odio eu urna? Tempor diam, sed tincidunt et elementum, pid ut rhoncus in augue nec nisi ac ridiculus. Nisi arcu elit! Ac integer est eros in adipiscing penatibus sagittis cursus est duis amet.
		</div>
	</div>
	
	<div class="accordion-head"><a href="#acc2">Accordion 2</a></div>
	<div class="accordion-body" id="acc2">
		<h2>This is the second Accordion content.</h2>
		<div class="accordion-content">
			Lacus augue natoque! Nec mauris sit, lorem penatibus elementum in cras. Dapibus, ridiculus augue elit sit? Lundium ultrices et! Et sed proin? Adipiscing tincidunt? Sed urna scelerisque sit? Urna hac, et nec turpis pulvinar nec elementum elementum a elementum a lectus! Vut, rhoncus tincidunt hac, ac montes proin risus arcu? Mus rhoncus mus in tristique! Arcu nunc mid lundium nisi. Mattis vel tempor sed cum purus a, dis phasellus nisi, risus aliquam dapibus ultrices porttitor phasellus, sagittis, tortor nunc penatibus penatibus sit, scelerisque penatibus diam aliquet ut odio eu urna? Tempor diam, sed tincidunt et elementum, pid ut rhoncus in augue nec nisi ac ridiculus. Nisi arcu elit! Ac integer est eros in adipiscing penatibus sagittis cursus est duis amet.
		</div>
	</div>
	
	<div class="accordion-head"><a href="#acc3">Accordion 3</a></div>
	<div class="accordion-body" id="acc3">
		<h2>This is the first Accordion content.</h2>
		<div class="accordion-content">
			Lacus augue natoque! Nec mauris sit, lorem penatibus elementum in cras. Dapibus, ridiculus augue elit sit? Lundium ultrices et! Et sed proin? Adipiscing tincidunt? Sed urna scelerisque sit? Urna hac, et nec turpis pulvinar nec elementum elementum a elementum a lectus! Vut, rhoncus tincidunt hac, ac montes proin risus arcu? Mus rhoncus mus in tristique! Arcu nunc mid lundium nisi. Mattis vel tempor sed cum purus a, dis phasellus nisi, risus aliquam dapibus ultrices porttitor phasellus, sagittis, tortor nunc penatibus penatibus sit, scelerisque penatibus diam aliquet ut odio eu urna? Tempor diam, sed tincidunt et elementum, pid ut rhoncus in augue nec nisi ac ridiculus. Nisi arcu elit! Ac integer est eros in adipiscing penatibus sagittis cursus est duis amet.
		</div>
	</div>
</div>

We have a “container” div. This we will give a width of 600px and we’ll center it on the page. Next, we have a “nav” div which will float to the left of the actual accordion and will have a “hide all” link. Then, we have 3 accordion sections. As you can see they have a head, which is the big clickable rectangle, and the content, which is the actual text. Also, notice the fact that each accordion-body has a unique id, and that the corresponding accordion-head link points to the id of the accordion-body. This is what makes this work.

CSS

Now, we can move on to the CSS that will power this accordion.
First off, we have some generic styling.

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#container {
width: 600px;
margin: 0 auto;
padding-top: 50px;
}

.accordion-head {
width: 580px;
height: 70px;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
background: #ffffff;
border: 1px solid #ababab;
font-size: 30px;
}

.accordion-head:hover {
background: #fbfbfb;
}

.accordion-head:active {
background: #efefef;
}

.accordion-head a {
color: #515151;
display: block;
text-decoration: none;
}

.accordion-head a:hover {
color: #313131;
}

.accordion-head a:active {
color: #111111;
}

.accordion-body h2 {
font-size: 30px;
}

#nav {
float: left;
width: 200px;
margin-left: -200px;
}

#nav a {
font-size: 25px;
color: #515151;
text-decoration: none;
}

#nav a:hover {
color: #313131;
}

#nav a:active {
color: #111111;
}

As you can see, it is just generic styling.

Now, this next CSS is the engine behind the accordion.

.accordion-body {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;

height: 0px;
overflow: hidden;
-webkit-transform: scale(1,0);
  -moz-transform: scale(1,0);
  -o-transform: scale(1,0);
  transform: scale(1,0);
}

#acc1:target {
height: 300px;
-webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -o-transform: scale(1,1);
  transform: scale(1,1);
}

#acc2:target {
height: 300px;
-webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -o-transform: scale(1,1);
  transform: scale(1,1);
}

#acc3:target {
height: 300px;
-webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -o-transform: scale(1,1);
  transform: scale(1,1);
}

Don’t worry, I’ll explain. By default, the accordion bodies have a height of 0px and an overflow set to hidden. We need this because otherwise, when an accordion shouldn’t visible – it will be. We are using the “transform” property to scale each accordion body to have 0 height and the same width. Here’s how it works:

  transform: scale(width,height);

The values that are given are multiplies by the elements full size, and scale it down accordingly. For example, if I had an element with a width and height of 500px, and styled it this way:

transform: scale(0.5,1);

Its width would be 0.5, or half of its max. In other words, 250px. Its height would be 1, that is to say its full 500px.

Now, back to the accordion. When an accordion body is :targeted, it animates back to its full height using the transform property, with the parameters (1,1), which are the same as “full size”.

Well, that’s it. Good luck and have fun!