Advanced CSS Accordion Effect

Published December 17, 2008 by Rob Glazebrook.

css accordion technique

A while back, I wrote an article demonstrating how the popular “accordion” effect (as in the image above) could be replicated with nothing more than CSS. There was one caveat, however: the technique didn’t work in Internet Explorer 6 due to the browser’s extremely limited support of the :hover pseudo-element.

Now, IE6’s market share is decreasing day by day – and we’re all undoubtedly thankful. But the browser will continue to maintain a healthy market share for quite some time to come. To that end, I’d like to revisit the CSS accordion technique and make a modification or two that will let it work with IE6.

I’m going to admit up front: these modifications require JavaScript. So what’s the point of having a “CSS” accordion technique that uses JavaScript? Well, all those other accordion techniques out there require JavaScript, and almost all require an entire JavaScript framework. This technique is merely improved by JavaScript – all modern browsers will handle this technique just fine even without JS enabled.

The Original Markup

We’re going to have to make a couple of teensy modifications to the CSS later on, but I wanted to show the original markup for consistency’s sake. Here’s the XHTML we originally used:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

And here is the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

#accordion {
	width: 500px;
	margin: 100px auto; }
#accordion div {
	float: left;
	width:25%;
	height: 300px;
	overflow: hidden;}
#accordion:hover div {
	width: 20px; }
#accordion:hover div:hover {
	width: 440px;
	overflow: auto; }

If you’d like to better understand how all of this works, please refer to the original article.

Better Living Through JavaScript

The idea on how to improve this script came to me one day while I was going through the CSS Newbie archives (yes, I have to refer to my own archives to remember how to do things some days!). I was rereading my article on Easy CSS Dropdown Menus and I realized that the same JavaScript that allows my dropdown menus to be hover-able (that is, the Suckerfish technique) would work just as well on my CSS accordion. Here’s that code modified to effect the accordion:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

accHover = function() {
	var accContainer = document.getElementById("accordion");
	accContainer.onmouseover=function() {
		this.className+=" hover";
	}
	accContainer.onmouseout=function() {
		this.className=this.className.replace(new RegExp(" hover\b"), "");
	}
 
	var accDivs = accContainer.getElementsByTagName("div");
	for (var i=0; i<accDivs.length; i++) {
		accDivs[i].onmouseover=function() {
			this.className+=" hover";
		}
		accDivs[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\b"), "");
		}
	}	
}
if (window.attachEvent) window.attachEvent("onload", accHover);

Basically, this code loops through all the divs within the accordion, as well as the containing accordion div itself, and applies a mouseover and mouseout function to each. Then when the user mouses over the div, it gains a class of “hover”. When the user moves the mouse away from the div, the hover class is removed.

Now all we need to do is edit our CSS to look for either the hover pseudo-class or our new hover class, which is made easy with sequential selectors:

1
2
3
4
5
6
7
8
9
10
11
12
13

#accordion {
	width: 500px;
	margin: 100px auto; }
#accordion div {
	float: left;
	width:25%;
	height: 300px;
	overflow: hidden;}
#accordion:hover div, #accordion.hover div {
	width: 20px; }
#accordion:hover div:hover, #accordion.hover div.hover {
	width: 440px;
	overflow: auto; }

Even Easier with jQuery

Those of you who have been reading for a while know that I’m a big fan of the jQuery JavaScript framework. Thus, when I started to rewrite this script to work for our accordion, I decided to rewrite it in jQuery as well. For those of you who aren’t currently using jQuery, this script might be a bit overkill, as it’d require your users to download a lot more code in the long run (our tiny script plus the jQuery framework). But if you’re already using jQuery, this cuts our heavy lifting down by quite a bit: 

1
2
3
4
5
6
7

$(document).ready(function() {
	$("#accordion, #accordion div").mouseover(function() {
		$(this).addClass("hover");
	}).mouseout(function() {
		$(this).removeClass("hover");
	});
});

This script does the same thing as our longer JavaScript above, but with far less code.

So that’s all there is to it! You can see a demo of this in action here. The accordion should function just fine in all major browsers with our without JavaScript enabled, and will function in IE6 with JavaScript. Enjoy!

36 Responses

  4. Pingback: rascunho » Blog Archive » links for 2008-12-18

  5. elvisparsley

    The first my reactio to the demo is that it needs a smooth animation touch so that it will be more attractive and elegant. Then I remember that this site is about CSS. But I found you are using jquery. So why not using it.

    Thanks.

  6. Chris

    Honestly, that sucks. It’s a good proof of concept but it looks horrendous and shouldn’t be used on any sort of site. It’s awkward to go from one box to the other.

  7. Rob Glazebrook (Author)

    Honestly, “that sucks” is terrible feedback. The rest I can appreciate more.

    I’m not a designer — as I reiterate roughly every third article here. :) And I’m generally not trying to produce stuff for people to copy and paste verbatim. I’m trying to produce stuff from which people can learn.

    So if it’s a good proof of concept, that’s good… because that’s all I was going for!

  8. rohnn

    Hey Rob.
    I followed from your post from cssglobe.

    Why you call it “Advanced CSS Accordion Effect” since it is JQuery based ???
    Can it run without JQuery ?

    And why not use some smooth sliding ? Wont hurt for sure.:)
    Furthermore, I dont feel it is really usable…Would be much more on click than hover.

  9. Hassan

    I hate to use JS! The hover problem in ie6 can be fixed with Whatever:hover htc file easily. This behavior enables the :hover pseudo-class in ie. I think it’s good, cause, it’s light-wight, other browsers won’t load this file (without any comment hack), and it doesn’t require user to be javascript-enabled.
    Thanks for your great post!

  10. Pingback: [Web] 連結分享 « 網站製作學習誌

  11. Pingback: Good Links from the Last Few Days | Castup

  12. Pingback: Advanced CSS Accordion Effect - The Words from a Bajan

  13. Pingback: Link Post Sunday 01/03 | Mr Sun Studios

  14. Mike From Cincinnati Ohio

    I like the effect, I would really like to see a more expanded version, one that has some options for the built in jquery animation. Superfish animation as well as suckerfish animation is nice. I am an avid follower of this site and I like the stuff you do. Keep up the good work.

  15. Silver Firefly

    Guys, he tried to teach you the CONCEPT of a CSS-based accordion. It’s up to you guys if you want a pretty sliding animation to implement it yourselves.

  16. Mara Alexander

    The demo is *not* working in IE6 (at least for me), and in Firefox 3.5 this looks horrid. So bad I don’t see how you can offer it as a replacement of JS-driven accordions. It doesn’t come close.

  17. Kalli

    I really like your menu, but i can ‘t work out how the menu with JS but without jQuery works. Is there a demo online? The panels doesn’t seem to close…

  18. Pingback: The Best CSS Newbie Articles of 2009

  19. Pingback: Saint John Web Design | Informative Computer Solutions » Blog Archive » How To Create Simple, Stylish and Swappable Image Captions

  20. Pingback: 100 Popular jQuery Examples, Plugins and Tutorials

  22. johny why

    everybody, the whole point of this was to be CSS-ONLY, that’s why he’s not exploiting any jquery tricks! try reading the article!

    rob, when your mouse comes in slowly from the left, the panels don’t always open properly.

    rob, can you implement the Whatever:hover htc file mentioned in comments, and get rid of jquery altogether?

    rob, can you make it easier to switch between vertical or horizontal, or give some more tips on how to do that?

    thanks!~

  25. Pingback: WEB/GRAPHIC DESIGN - Seattle's Premier Web & Graphic Designer

  26. Pingback: 100 Popular jQuery Examples, Plugins and Tutorials » TemplateLite.com

  28. Ajinkya

    Btw ROB, i didnt get the jQuery part ?

    is it correct > 1st add linking in header & add ur functions in script tag and then just add css ?

    Sorry, im noob in jQuery.

  31. Kanhai

    To make this code run in IE we’ll have to paste the DOCTYPE Decleration.

    Here just paste this code above your <html></html> tag and then Celebrate…..

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  32. Pingback: CSS Accordion Effect Menu « tisuchi

  33. Pingback: Que es Ajax..Jquery , ejemplos y tutoriales con C# .NET y PHP.. | Achocoza

  34. Latoria Vizard

    I like the valuable information you provide in your articles. I will bookmark your blog and check again here regularly. I am quite sure I will learn plenty of new stuff right here! Best of luck for the next!

  36. Pingback: 111 jquery tutorial and plugins package | Web Designer Blog – Webdesigner Place

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>