The CSS-Only Accordion Effect

Published April 9, 2008 by CSS Newbies.

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:

#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:

#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:

#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!

244 Responses

  1. wifi thermostat honeywell (reply)

    Someone necessarily lend a hand to make critically articles I would state.

    That is the first time I frequented your web page and up
    to now? I amazed with the research you made to create this particular
    publish extraordinary. Magnificent process!

  2. iphone works pretty (reply)

    Oh my goodness! Amazing article dude! Thank you, However I am having issues with your RSS.
    I don’t know the reason why I am unable to join it.
    Is there anybody getting identical RSS issues?
    Anybody who knows the answer can you kindly respond? Thanks!!

  4. clean (reply)

    When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added
    I get several e-mails with the same comment.

    Is there any way you can remove people from that service?

    Many thanks!

  5. Pingback: 30个CSS导航技术 | Joozo.net Web Plus

  6. Edna (reply)

    I’m really loving the theme/design of your site. Do you ever run into any internet browser compatibility
    problems? A few of my blog readers have complained about my website not operating correctly in Explorer but looks great in Opera.

    Do you have any recommendations to help fix this problem?

  9. BJ Eyland (reply)

    Can you get this to work on an iPad? I am trying to write a simple eBook using simple CSS – to switch from a physics question to a physics answer. each text has an image in it.

  12. Jane (reply)

    This is the right webpage for anyone who really wants to find out about this topic.
    You know so much its almost tough to argue with you (not
    that I actually would want to…HaHa). You definitely put a brand new spin on a topic that has been written about for years.
    Great stuff, just wonderful!

  16. computer guide (reply)

    Hello, i believe that i saw you visited my website thus i got here to return the desire?.I am attempting
    to to find things to improve my web site!I guess its ok
    to use a few of your ideas!!

  18. Jess (reply)

    Lo vamos a hacer igual que antes, mechón a mechón, y aplicando fluido de queratina en cada mechón, para resguardarlo, ya antes de ponerle la plancha.

  20. hardware (reply)

    Right now it seems like Drupal is the preferred blogging platform available right now.
    (from what I’ve read) Is that what you are using on your blog?

  21. vitamix or ninja (reply)

    I do consider all of the ideas you have introduced
    to your post. They are very convincing and can definitely work.
    Still, the posts are too short for beginners. May just
    you please prolong them a bit from subsequent time? Thanks
    for the post.

  22. Fivr (reply)

    I’m now not certain the place you’re getting
    your information, but great topic. I needs to spend a while learning much
    more or working out more. Thanks for wonderful information I used to be on the lookout for this info for my
    mission.

  26. immobilier istres 13 (reply)

    Can I simply say what a relief to discover someone that actually understands what they are talking about over the internet.
    You definitely understand how to bring a problem to light and make it important.
    More and more people need to look at this and understand this side of your story.
    I was surprised that you aren’t more popular because you most
    certainly have the gift.

  28. muaythaiboxenteam.de (reply)

    Oh my goodness! Impressive article dude! Thank you,
    However I am experiencing problems with your RSS.

    I don’t understand why I am unable to join it. Is there anyone
    else having similar RSS problems? Anyone that knows the solution will you kindly respond?
    Thanks!!

  29. make a custom shirt (reply)

    I believe this is one of the so much significant information for me.
    And i’m happy studying your article. However want to statement on some basic things, The web site taste is
    wonderful, the articles is in point of fact great : D.
    Just right task, cheers

  31. Guadalupe (reply)

    El plazo de inscripción para apuntarse a la octava edición del ALLSTARTUP, que
    va a tener lugar los días dos, tres y 4 de octubre de 2015, está abierto a través de la página web de Demium Startups y de En la edición anterior, festejada
    en el primer mes del verano, más de ciento
    sesenta emprendedores se apuntaron para participar en el acontecimiento.

  34. Pingback: ピュアCSSアコーディオン | Acenumber Technical Issue

  38. toko sepatu wanita termurah (reply)

    Yesterdɑy, w&#1211ile I was att աork, mʏ cousin stole my iphone andd tested tо seee iif іt саn survive a thhirty foot drop, ϳust ѕ&#11423
    sҺ&#6513 ccan ƅ&#6513 a youtube
    sensation. &#8559y apple ipad іѕ noѡ broken andd ѕҺ&#6513 Һаѕ 83
    views. Ι кnoѡ t&#1211іs iѕ entirely օff topic Ьut ӏ ɦad tο share іt with someone!

    mу weblog – toko sepatu wanita termurah

  41. Annis (reply)

    Sehr scɦöner Beіtгаǥ!

    &#8544ϲ&#1211 ɡսсқe mіг sеɦг gеrne &#5081іdеоѕ іm ԜеЬ an. Ѵߋгall&#6513m maց іϲh Νetflіх.

  42. queens beer delivery (reply)

    I think what you typed made a bunch of sense. But, consider this, what if you added
    a little content? I mean, I don’t wish to tell you how
    to run your blog, however suppose you added a headline
    to maybe grab a person’s attention? I mean The CSS-Only Accordion Effect is a little vanilla.

    You should look at Yahoo’s home page and see
    how they write news headlines to grab people to open the links.

    You might add a related video or a picture or two to grab readers interested about
    everything’ve written. In my opinion, it might bring your posts a little bit more
    interesting.

  44. scam (reply)

    I’ve been browsing online more than 3 hours nowadays, yet I
    by no means discovered any fascinating article like yours. It
    is lovely price sufficient for me. Personally, if
    all site owners and bloggers made excellent content as you did, the web will be a
    lot more helpful than ever before.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>