The CSS-Only Accordion Effect

By Rob Glazebrook on April 9, 2008

Update: I’ve created an advanced version of this technique that works in IE6! Read more here.

The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript.

First off, what is an “accordion” effect? Generally speaking, the accordion effect takes several larger elements and then compresses them into a small space so that only a small portion (like a heading) of most or all of the elements is visible. Then, when the user interacts with that element — either by clicking on it or maybe only mousing over — the accordion expands so that the element of interest is visible, and the other elements shrink down automatically. When it’s in use, it looks a bit like an accordion expanding and contracting: hence the name.

Our accordion will work exactly the same way: all of the elements will be partially visible when the user loads the page. And then when they mouse over a particular section, it will instantly expand – and the other elements will contract – to make reading more easy.

example of accordion effect before and after the user mouses over it

So how do we accomplish this trick? First, we start with our XHTML, which just consists of a couple of divs with some IDs applied:

<div id="accordion">
	<div id="part1">
		<p>This text is in part 1.</p>
	</div>
	<div id="part2">
		<p>This text is in part 2.</p>
	</div>
	<div id="part3">
		<p>This text is in part 3.</p>
	</div>
	<div id="part4">
		<p>This text is in part 4.</p>
	</div>
</div>

My first div defines where my accordion starts and ends. The divs nested inside are just parts of my accordion – they don’t even technically need IDs unless I want to style them differently. That’s all the XHTML it takes!

So now, let’s start building our accordion. We start by defining the physical limitations of our space:

1
2
3

#accordion { 
	width: 500px; 
	margin: 100px auto; }

All I’ve done is give my accordion a specific width and centered it in the page for a nice visual effect. Now, I have to create the default state for the divs inside of my accordion:

#accordion div {
	float: left;
	width:25%;
	height: 300px;
	overflow: hidden;}

This snippet floats all of my divs to the left and gives them a specific width and height. I’ve chosen a width of 25% because I have four elements in my accordion, so they all split that width up evenly by default. If I’d had five elements, I would have used 20%, and so on. My height of 300 pixels also becomes the height of my accordion div.

The overflow: hidden part here is also crucially important. This is what prevents my divs from either resizing to fit their content or spilling their content out of the containing div and onto our page. It also creates a nice visual effect… people will wonder what content they’re missing, and will mouse over the area to investigate.

extra text is hidden from the user, inspiring curiosity.

So now that we’ve created our default state, we need to create our hover or “active” state. This requires two CSS rules. The first looks like this:

1	#accordion:hover div { width: 20px; }

We’re using the :hover pseudo-class here in a pretty creative way – we’re telling all of the divs inside of the div we’re hovering over to change. Specifically, we’re shrinking them all down to 20 pixels to make room for our expanded accordion section. So now we just need to make sure it expands:

1
2
3

#accordion:hover div:hover {
	width: 440px;
	overflow: auto; }

The :hover pseudo-class comes into play here again. Now, we’re applying styles to an element we’re hovering over, inside of an element we’re hovering over. We’re styling this element differently than our others by giving it a specific width – 440 pixels, i.e. 500 pixels minus the 20 pixels taken up by our other three divs – and setting its overflow to “auto.” These two classes cause our active div to expand, and then give it a scroll bar if the content is too long.

And that’s all there is to creating a CSS-only accordion box! If you’d like to see it in action, click here. The only change I’ve made to the full version is I’ve added a few background styles and some interior padding to each of the accordion sections to make them stand out and look a little more attractive.

This example creates a horizontal accordion box. But it’s just as easy to create a vertically oriented accordion. All we really need to do is eliminate the floats on our nested divs and turn most of our width tags into height tags. Here is the markup:

#accordion {
	width: 500px;
	height: 400px;
	margin: 20% auto; }
#accordion div {
	height:25%;
	overflow: hidden;}
#accordion:hover div {
	height: 20px; }
#accordion:hover div:hover {
	height: 340px;
	overflow: auto; }

And you can see it in action here.

As with any trick this cool, there are some caveats. Most significantly: this technique does not work in IE6, (update: now works in IE6! Read more here) because IE6 doesn’t support hover states on anything other than anchors. Therefore, you can make it work if you’re willing to make a sacrifice: if you wrap all of your divs in anchor tags, and then apply the hover state to those anchors instead of your divs, the technique should work the same (I haven’t tried it, though). However, that wouldn’t be particularly semantic or valid, so I’m not showing it here.

Also, if you apply any padding or borders to your #accordion div, that can cause some problems. The border and padding are part of your div, and therefore part of your :hover class. However, if you’re hovering over the containing div’s padding, you aren’t hovering over one of the sections of your accordion – meaning all of your interior divs will shrink down to their smallest size, and none will grow to fill the space. It took me half an hour of debugging to figure this one out. :)

So there you have it. Use it, share it, love it. And let me know in the comments if you come up with a particularly interesting or attractive implementation – mine is obviously pretty simple!

49 Comments

On April 09, 2008
10:12AM

Jennifer said:
This would be interesting to see implemented in collapsed navigation in the secondary content area of the page (sidebar). Suppose you are using uls for your nav, apply the height and overflow styles to their corresponding ul and/or li.
The main gripe I have about this accordion method, however, is that it proves inaccessible to users without a mouse, which happens more often that we care to admit. iPhone/iPod Touch users are incapacitated, and I know in my conference room the wireless mouse works just as often as it doesn’t and I’m usually relegated to keyboard control.
In a navigation setting, however, you could combat this problem with anchors around the nav section headings (which are semantic), coupled with :active and :focus styles in addition to your hover styles.
Altogether, pretty cool! This along with a Javascript accordion promises users a very similar experience whether or not JS is enabled.
On April 09, 2008
11:26AM

Rob Glazebrook said:
Great comments, Jennifer. I’ll admit wholeheartedly that this sort of method isn’t appropriate for all uses. I mostly presented it as a proof-of-concept: you don’t need more than a dozen lines of CSS to create some pretty interesting interactive effects. I like the idea of trying the change to the :active and :focus pseudo-classes, too — I might have to give that a try!
On April 10, 2008
11:22AM

Justin said:
Pretty cool. However, doesn’t have that smooth effect like you get when using javascript. Very impressive!
On April 11, 2008
3:00AM

Alex said:
It’s probably a nice way for a Javascript-powered accordian to degrade (assuming the mouse access issues were handled).
Like many people, I have ‘No Scripts’ enabled when I visit a site for the first time, and many sites never get a chance to get their JS privileges because they fail badly on first load.
This gives you basic site functionality without any JS needed.
On April 11, 2008
3:45AM

Adam said:
Nice, but it doesn’t work in ie6; that reminds me suckerfish
On April 11, 2008
6:37AM

leonard said:
Doesn’t seem to work properly in firefox3b5, when accordion is horizontal, and when you move from left to right, the last pane doesn’t flip open but instead all pane are collapsed and will reset to default if you leave the the accordian area
On April 11, 2008
7:42AM

tony petruzzi said:
might be considered cheating, but you can get the :hover effect in ie6 to work with a little javascript:
http://lawrence.ecorp.net/inet/samples/css-ie-hover1.shtml
On April 25, 2008
11:01AM

ctraos said:
exlente post, muchas gracias !!
On May 01, 2008
4:32AM

Justin said:
This is pretty cool. I have something similar working on my site only it’s more of a vertical navigation for some quick misc. links. It’s a little tricky but I’m still working with it to get it to work better.
Justin
On May 06, 2008
12:12AM

www.minicity.in said:
Thanks for your posting !
But it’s not work on IE6 !
———^_^——–
Thanks and best regard,
On June 14, 2008
2:59AM

Alex said:
Nice realization.
But I have some troubles with MSIE.
On July 26, 2008
10:02AM

California Home Equity Loan said:
I happened upon this site while following the links from another site. Your site is wonderful and i bookmarked it. Thank your for the hard work you must have put in to create this wonderful facility. Keep up the excellent work
On November 08, 2008
5:48AM

Raza Ali said:
It’s really awesome i must have to try…
On April 23, 2009
11:43AM

Doug said:
Hi, I was wondering if it was possible to set one of the columns to be wide on page load. And when ever the bar is not hovered that one column is always bigger. I hope this is understandable.
On October 10, 2009
6:01AM

Nenad said:
Honestly, I’m not impressed in any way. First it breaks in Opera and second it doesn’t look good anyway.
On November 11, 2009
7:25AM

Rahul - Web Guru said:
I just wish there was a horizontal menu for this one. ;)
On November 30, 2009
12:19PM

Flying Dutchman said:
Amazing !
I am a css-only fan too, but this is one off the most beautifull trick I saw.
Can permit me to suggest you to use the CSS3 “transition:;” property (works in firefox 3.6 with -moz- and in Chrome and Safari with -webkit-).
So you can give animation to your effet :
It will no more be instantly but the accordion effect will be gradual (I am maybe not very comprehensive, ’cause I am can’t speak very good english…).
You can see some animation effect on my home page, in the head menu (with Chrome, safari or Firefox 3.6).
I hope I have help you a bit^^
Long live css^^”
And I repeat, I find your effect amazing !
On April 16, 2010
9:21AM

Jordan Walker said:
Great to see a detailed article on CSS3. Thanks much!
On April 29, 2010
3:10AM

Surya Adi Sapoetra said:
cool tutorial…
On April 29, 2010
5:10PM

johny why said:
thanks for this!
here’s a simpler method, which works on all browsers i’ve tested so far (and i expect it to work in IE6 with the .htc trick mentioned above and here: http://www.xs4all.nl/~peterned/csshover.html
my method-
-eliminates your accordion margin, that’s unnecessary, just an aesthetic call which complicates your demo.
-eliminates one of your hovers, works without it
-eliminates your ‘clear:both’ div at the bottom of the accordion, works without it
-eliminates your accordion height, unnecessary for accordion functioning, that just pushes down content below the accordion even when the accordion is closed, leaving an empty gap below the accordion. someone might want that, but it’s an aesthetic call, and makes your code here more difficult to understand.
here’s the complete css:
#accordion {
width: 500px;
}
#accordion div {
height:60px;
overflow: hidden;
}
#accordion div:hover {
height: auto;
}
i was helped by the poster here: http://welovecss.com/showthread.php?s=20f8fc7c3bc1a456e906dde7837b927f&p=20980#post20980
On May 06, 2010
10:12AM

Alejandro said:
Check http://alejandroaraneda.blogspot.com
Insper in Timo Huovinen’s CSS-only HTML-valid new drop-down menu system, I have developed my own system for CSS-only HTML-valid crossbrowser (IE6-7-8, FF, Cr, Op, Sa) horizontal accordion menu. I also added sliding effect with CSS3-transitions (Cr, Sa, and next FF and Op) and SMIL (HTML+TIME for IE6-7-8)
On September 05, 2010
7:07PM

Yesica said:
I can’t wait to try this. I’ve been fidgeting with the spry accordions in Dreamweaver and I’ve been having some..err..difficulties. Thank you!
On February 02, 2011
5:48AM

Kanhai said:
To make this work in IE just try Using DOCtype in your html
On February 02, 2011
6:00AM

Kanhai said:
Great tutorial !!!
On April 15, 2011
8:14PM

I Putu Sudarma said:
Nice…. Thanks
On June 15, 2011
1:10PM

Tawana Trudell said:
Thanks, I’ve recently been looking for facts about this subject for ages and yours is the best I have located so far.
On June 21, 2011
11:51AM

σχολες οδηγων θεσσαλονικη said:
Css is perfect for accordion there is no need for jQuery thnx a lot guys i was searching it for looong time!
On July 16, 2011
11:57AM

Tamie Tade said:
Thanks for a marvelous posting! I actually enjoyed reading it, you happen to be a great author.I will make sure to bookmark your blog and will eventually come back someday. I want to encourage continue your great work, have a nice weekend!
On July 19, 2011
4:28AM

Phoenix said:
Would be nice to see a vertical accordion example.
On July 20, 2011
8:08AM

запчсти для грузовых автомобилей said:
продажа запчастей для ЗИЛ, ГАЗ, КАМАЗ, ГАЗЕЛЬ, КРАЗ…
On July 30, 2011
5:49AM

ζωγραφος said:
I love the use of CSS to my site Thnx for helping!
On August 04, 2011
9:54AM

φυσικο αεριο θεσσαλονικη said:
i prefer the css solution for accordion, is great and easy to use, easier then javascript or jquery. I recommend it 100 % !
On August 29, 2011
10:32PM

Chico Web Design said:
very nice tutorial for CSS effect!
On September 14, 2011
11:04AM

Aaron said:
would want to thank you for the work you get in writing this post. I am hoping a similar best work from you later on also. The fact is your creative writing ability has encouraged me to begin my own personal weblog now.
On September 14, 2011
11:28PM

black said:
I honestly liked the article, along with the especially cool weblog
On September 23, 2011
5:48AM

φωτοβολταικα χρηματοδοτηση said:
Accordion is exact that i was looking for! Merci beaucoup Rob!
On September 29, 2011
7:28AM

εσωρουχα said:
Why to not make a combination of css and html? It is better to use only css for make it load faster?
On October 06, 2011
6:10AM

αποκριατικες στολες said:
If my page is php based its ok to put the css only accordion effect or it will be a problem?
On November 09, 2011
4:05PM

supply chain consulting said:
One of my favorite posts.
On November 09, 2011
9:15PM

a716238 said:
I’ve said that least 716238 times. The problem this like that is they are just too compilcated for the average bird, if you know what I mean
On November 09, 2011
11:17PM

Markus Stirna said:
Katy Perry happens to be at # 4 located on the United states Billboard Chart. In a case where. She actually reaches number one it will be her 5th numberone single coming from the same album, California Dreams
On November 10, 2011
1:04AM

Direct Travel Insurance said:
Nice to be visiting your weblog again, it has been months for me. Properly this write-up that i’ve been waited for so long. I want this post to total my assignment within the college, and it has exact same topic with your write-up. Thanks, excellent share.
On November 10, 2011
2:00AM

cloud computing companies said:
I am often blogging and i really appreciate your content. The article has really peaked my interest. I am going to bookmark your site and keep checking for new information.
On November 10, 2011
2:37AM

wealthy affiliate university said:
Good site! I really love how it is easy on my eyes and the data are well written. I’m wondering how I could be notified whenever a new post has been made. I’ve subscribed to your RSS feed which must do the trick! Have a great day!
On November 10, 2011
4:14AM

hjsplit said:
Great blog! I really love how it’s easy on my eyes as well as the information are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your rss feed which ought to do the trick! Have a nice day!
On November 10, 2011
4:41AM

Koh Samui 5 Star Hotels said:
Excellent post.I want to thank you for this informative read, I really appreciate sharing this great post. Keep up your work…
On November 10, 2011
8:19AM

Solomon Nham said:
Sorry for the huge review, but I’m really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if it’s the right choice for you.
On November 10, 2011
8:45AM

Nathaniel Wong said:
I like what you guys are up also. Such clever work and reporting! Carry on the excellent works guys I’ve incorporated you guys to my blogroll. I think it’ll improve the value of my site :). “As is a tale, so is life not how long it is, but how good it is, is what matters.” by Lucius Annaeus Seneca.
On November 23, 2011
9:01AM

Bacha said:
why i often face with mistakes when try to maket.