How to Create a CSS3-Only Horizontal Accordion Using the :target Selector

Share this article

The CSS3 :target selector is incredibly powerful and allows us to create attractive widgets which would have required ninja-like JavaScript skills a few years ago. We’ve already built a tab control and a vertical accordion. In this post, we’ll create a horizontal accordion using the same HTML5 markup. View the demonstration page… The solution works in IE9, Chrome, Firefox, Safari and Opera and doesn’t require JavaScript or images. Again, it fails miserably in IE6, 7 and 8 so you either need a JavaScript shim such as selectivizr or some other fallback.

The HTML

Here’s a reminder of the HTML5 code. It’s identical to our vertical accordion: there are a number of section elements with clickable headings contained in the initial h2 tag:

<article class="accordion">

	<section id="acc1">
		<h2><a href="#acc1">Title One</a></h2>
		<p>This content appears on page 1.</p>
	</section>
	
	<section id="acc2">
		<h2><a href="#acc2">Title Two</a></h2>
		<p>This content appears on page 2.</p>
	</section>
	
	<section id="acc3">
		<h2><a href="#acc3">Title Three</a></h2>
		<p>This content appears on page 3.</p>
	</section>
	
	<section id="acc4">
		<h2><a href="#acc4">Title Four</a></h2>
		<p>This content appears on page 4.</p>
	</section>
	
	<section id="acc5">
		<h2><a href="#acc5">Title Five</a></h2>
		<p>This content appears on page 5.</p>
	</section>

</article>

The CSS

The CSS is a little more complex but it’s worth it. First we style our outer article container:

article.accordion
{
	display: block;
	width: 43em;
	margin: 0 auto;
	background-color: #666;
	overflow: auto;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}
Each section starts in its closed state; they’re floated to the left and have a width of 2em. Overflow is set to hidden and we’re also making the text color the same as the background so they effectively look like solid blocks without content:

article.accordion section
{
	position: relative;
	display: block;
	float: left;
	width: 2em;
	height: 12em;
	margin: 0.5em 0 0.5em 0.5em;
	color: #333;
	background-color: #333;
	overflow: hidden;
	border-radius: 3px;
}
Now for some nasty prefixed CSS3! Each h2 title is rotated 90° counter-clockwise using a transform and absolutely positioned over the closed section:

article.accordion section h2
{
	position: absolute;
	font-size: 1em;
	font-weight: bold;
	width: 12em;
	height: 2em;
	top: 12em;
	left: 0;
	text-indent: 1em;
	padding: 0;
	margin: 0;
	color: #ddd;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

article.accordion section h2 a
{
	display: block;
	width: 100%;
	line-height: 2em;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}
We can now ‘open’ the active section using the :target selector. The section width and colors are changed and the title is moved back to the top:

article.accordion section:target
{
	width: 30em;
	padding: 0 1em;
	color: #333;
	background-color: #fff;
}

article.accordion section:target h2
{
	position: static;
	font-size: 1.3em;
	text-indent: 0;
	color: #333;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
That’s fine, but a CSS3 transition makes it look fantastic:

article.accordion section,
article.accordion section h2
{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
View the demonstration page… It’s a shame IE6, 7 and 8 users can’t use the widget. IE9 users won’t see animation either. But you’d need a lot of time and patience to achieve the same effect using JavaScript! Have fun with it.

Frequently Asked Questions (FAQs) about CSS3 Horizontal Accordion Using Target Selector

How can I add more panels to the CSS3 horizontal accordion?

Adding more panels to the CSS3 horizontal accordion is quite simple. You just need to add more sections to your HTML code. Each section represents a panel in the accordion. Remember to give each section a unique ID and link it to the corresponding label using the ‘for’ attribute. This will ensure that when a label is clicked, the corresponding section will open.

Can I use images in the CSS3 horizontal accordion?

Yes, you can use images in the CSS3 horizontal accordion. You can add an image tag inside the section tag in your HTML code. You can then style the image using CSS to fit within the panel. Remember to use responsive design techniques to ensure the image scales properly on different screen sizes.

How can I change the animation speed of the CSS3 horizontal accordion?

The animation speed of the CSS3 horizontal accordion can be changed in the CSS code. Look for the ‘transition’ property in your CSS code. The second value in the ‘transition’ property represents the duration of the transition. You can increase or decrease this value to change the animation speed.

Is it possible to have the accordion start with a panel open?

Yes, it is possible to have the accordion start with a panel open. You can achieve this by adding the ‘:target’ pseudo-class to the section you want to start open in your CSS code. This will make the section appear open when the page loads.

Can I change the direction of the CSS3 horizontal accordion?

The direction of the CSS3 horizontal accordion is determined by the ‘flex-direction’ property in your CSS code. By default, it is set to ‘row’, which makes the accordion horizontal. If you want to make the accordion vertical, you can change the ‘flex-direction’ property to ‘column’.

How can I add a border to the panels in the CSS3 horizontal accordion?

You can add a border to the panels in the CSS3 horizontal accordion by adding a ‘border’ property to the section in your CSS code. You can specify the width, style, and color of the border in this property.

Can I use the CSS3 horizontal accordion on a mobile device?

Yes, the CSS3 horizontal accordion can be used on a mobile device. However, you need to ensure that your design is responsive. This means that the accordion should scale and adjust its layout based on the screen size of the device.

How can I change the color of the panels in the CSS3 horizontal accordion?

You can change the color of the panels in the CSS3 horizontal accordion by changing the ‘background-color’ property in your CSS code. You can use any valid color value, such as a color name, a hexadecimal color, or an RGB color.

Is it possible to nest accordions within each other?

Yes, it is possible to nest accordions within each other. You can achieve this by placing one accordion inside a section of another accordion in your HTML code. However, keep in mind that nested accordions can become complex and may be difficult for users to navigate.

Can I add text to the panels in the CSS3 horizontal accordion?

Yes, you can add text to the panels in the CSS3 horizontal accordion. You can add a paragraph tag inside the section tag in your HTML code. You can then style the text using CSS to fit within the panel.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

CSSCSS3HTML5 Dev CenterHTML5 Tutorials & Articles
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form