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

Share this article

We recently created a CSS3-Only tab control
which used the powerful :target selector. One of the major benefits of CSS is that we can restyle HTML how we like; so we’re going to transform our mark-up into a vertical accordion. View the demonstration page… The solution works in IE9, Chrome, Firefox, Safari and Opera and doesn’t require JavaScript or images. It fails miserably in IE6, 7 and 8 so you could either use the selectivizr shim or hide the widget from those users and tell them to upgrade.

The HTML

Our HTML5 code is identical to that used by the tab control. I’ve only changed the article class to “accordion” and renamed some of the IDs so it’s easier to understand what’s going on. There are also five sections since it looks a little better:

<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>
As before, the clickable section heading is contained within each section as the initial h2
tag.

The CSS

First, we’ll style the article container and section elements. Each section starts in its closed state with a height of 2em (note that overflow is set to hidden):

article.accordion
{
	display: block;
	width: 30em;
	padding: 0.5em 0.5em 1px 0.5em;
	margin: 0 auto;
	background-color: #666;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

article.accordion section
{
	display: block;
	width: 28em;
	height: 2em;
	padding: 0 1em;
	margin: 0 0 0.5em 0;
	color: #333;
	background-color: #333;
	overflow: hidden;
	border-radius: 3px;
}
The section title is now styled to use all the available room in the closed state:

article.accordion section h2
{
	font-size: 1em;
	font-weight: bold;
	width: 100%;
	line-height: 2em;
	padding: 0;
	margin: 0;
	color: #ddd;
}

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. We set a larger height and background color, then enlarge and re-color the title too:

article.accordion section:target
{
	height: 15em;
	background-color: #fff;
}

article.accordion section:target h2
{
	font-size: 1.6em;
	color: #333;
}
If necessary, you can set the section height to auto
so it uses the minimum space it requires. However, that makes it impossible to add nice CSS3 transitions which smoothly resizes the element…

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… If anything, this CSS is simpler than the tab control and looks better. But vertical accordions are easy — horizontal ones are far cooler!…

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

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

Adding more panels to the CSS3 vertical accordion is quite straightforward. You simply need to duplicate the existing panel structure in the HTML code and assign it a unique ID. Remember to also create a corresponding label for the new panel. The CSS will automatically apply the accordion effect to the new panel.

Can I use images in the accordion panels?

Yes, you can use images in the accordion panels. To do this, you simply need to add an img tag within the content section of the panel in your HTML code. Ensure the image file is correctly linked and the dimensions are appropriately set to fit within the panel.

How can I change the animation speed of the accordion?

The animation speed of the accordion is controlled by the transition property in the CSS code. By default, it’s set to 0.5s, but you can adjust this value to make the animation faster or slower. For example, changing it to 1s will make the animation twice as slow.

Is it possible to have multiple accordions on the same page?

Yes, it’s possible to have multiple accordions on the same page. Each accordion should have a unique ID for its panels and corresponding labels. This ensures that clicking a label only opens the panel in its own accordion and not in others.

Can I change the direction of the accordion to horizontal?

Yes, you can change the direction of the accordion to horizontal. This requires modifying the CSS code to change the orientation of the panels and labels. However, this might require a good understanding of CSS to implement correctly.

How can I make the accordion start with a panel already open?

To make the accordion start with a panel already open, you need to add the :target pseudo-class to the panel you want to be open in your CSS code. This will make the panel open by default when the page loads.

Can I use the CSS3 vertical accordion on a responsive website?

Yes, the CSS3 vertical accordion can be used on a responsive website. You might need to adjust the width and height properties in the CSS code to ensure the accordion displays correctly on different screen sizes.

How can I change the color of the accordion panels?

The color of the accordion panels can be changed in the CSS code. You can use the background-color property to set the color of the panels. You can use any valid CSS color value, such as a named color, a hexadecimal color, or an RGB color.

Is it possible to nest accordions within each other?

Yes, it’s possible to nest accordions within each other. This involves creating a new accordion within the content section of a panel. However, this can be complex and might require a good understanding of HTML and CSS to implement correctly.

Can I add links within the accordion panels?

Yes, you can add links within the accordion panels. To do this, you simply need to add an anchor tag within the content section of the panel in your HTML code. Ensure the link is correctly formatted and points to a valid URL.

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