3 minutes

How to Create a Content Accordion in Pure CSS3

15 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. 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">
				<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>
		</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

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website

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 &gt; 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 &gt; 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.

&lt;div class=&quot;content&quot;&gt;
	&lt;img src=&quot;img/post-img-1.png&quot; alt=&quot;&quot;&gt;
	&lt;h1&gt;The Big Elephant in the City&lt;/h1&gt;
	&lt;span&gt;5 days ago&lt;/span&gt; &lt;em class=&quot;bullet&quot;&gt;&lt;/em&gt; &lt;span&gt;17 comments&lt;/span&gt;
	&lt;p&gt;Known locally as &quot;SoMa&quot;, this neighborhood was home to the dot.com boom and boasts cutting-edge restaurants and boutiques.&lt;/p&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;img src=&quot;img/thumb-1.png&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src=&quot;img/thumb-2.png&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
		&lt;li&gt;&lt;img src=&quot;img/thumb-3.png&quot; alt=&quot;&quot;&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;

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 &gt; 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

Download Content Accordion

Download

Valeriu Timbuc

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 @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Posts by Valeriu Timbuc

Animated Presentations Made Easy

Learn more All Products
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree