{"id":311,"date":"2008-12-17T17:36:58","date_gmt":"2008-12-17T22:36:58","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=311"},"modified":"2008-12-17T17:36:58","modified_gmt":"2008-12-17T22:36:58","slug":"advanced-css-accordion-effect","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/advanced-css-accordion-effect\/","title":{"rendered":"Advanced CSS Accordion Effect"},"content":{"rendered":"

\"css<\/a><\/p>\n

A while back, I wrote an article demonstrating how the popular \u201caccordion\u201d effect (as in the image above) could be replicated with nothing more than CSS.<\/a> There was one caveat, however: the technique didn\u2019t work in Internet Explorer 6 due to the browser\u2019s extremely limited support of the :hover pseudo-element. <\/p>\n

Now, IE6\u2019s market share is decreasing day by day \u2013 and we\u2019re all undoubtedly thankful. But the browser will continue to maintain a healthy market share for quite some time to come. To that end, I\u2019d like to revisit the CSS accordion technique and make a modification or two that will let it work with IE6.<\/p>\n

I\u2019m going to admit up front: these modifications require JavaScript. So what\u2019s the point of having a \u201cCSS\u201d accordion technique that uses JavaScript? Well, all those other accordion techniques out there require<\/em> JavaScript, and almost all require an entire JavaScript framework. This technique is merely improved<\/em> by JavaScript \u2013 all modern browsers will handle this technique just fine even without JS enabled.<\/p>\n

The Original Markup<\/h3>\n

We\u2019re 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\u2019s sake. Here\u2019s the XHTML we originally used:<\/p>\n

<div id="accordion">\n\t<div id="part1">\n\t\t<p>This text is in part 1.<\/p>\n\t<\/div>\n\t<div id="part2">\n\t\t<p>This text is in part 2.<\/p>\n\t<\/div>\n\t<div id="part3">\n\t\t<p>This text is in part 3.<\/p>\n\t<\/div>\n\t<div id="part4">\n\t\t<p>This text is in part 4.<\/p>\n\t<\/div>\n<\/div><\/pre>\n
And here is the CSS:<\/p>\n
#accordion {\n\twidth: 500px;\n\tmargin: 100px auto; }\n#accordion div {\n\tfloat: left;\n\twidth:25%;\n\theight: 300px;\n\toverflow: hidden;}\n#accordion:hover div {\n\twidth: 20px; }\n#accordion:hover div:hover {\n\twidth: 440px;\n\toverflow: auto; }<\/pre>\n
If you\u2019d like to better understand how all of this works, please refer to the original article.<\/a><\/p>\n
Better Living Through JavaScript<\/h3>\n
The idea on how to improve this script came to me one day while I was going through the CSS Newbie archives<\/a> (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<\/a> and I realized that the same JavaScript that allows my dropdown menus to be hover-able (that is, the Suckerfish technique<\/a>) would work just as well on my CSS accordion. Here\u2019s that code modified to effect the accordion:<\/p>\n
accHover = function() {\n\tvar accContainer = document.getElementById("accordion");\n\taccContainer.onmouseover=function() {\n\t\tthis.className+=" hover";\n\t}\n\taccContainer.onmouseout=function() {\n\t\tthis.className=this.className.replace(new RegExp(" hover\\b"), "");\n\t}\n\t\n\tvar accDivs = accContainer.getElementsByTagName("div");\n\tfor (var i=0; i<accDivs.length; i++) {\n\t\taccDivs[i].onmouseover=function() {\n\t\t\tthis.className+=" hover";\n\t\t}\n\t\taccDivs[i].onmouseout=function() {\n\t\t\tthis.className=this.className.replace(new RegExp(" hover\\b"), "");\n\t\t}\n\t}\t\n}\nif (window.attachEvent) window.attachEvent("onload", accHover);<\/pre>\n
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 \u201chover\u201d. When the user moves the mouse away from the div, the hover class is removed. <\/p>\n
Now all we need to do is edit our CSS to look for either the hover pseudo-class or<\/em> our new hover class, which is made easy with sequential selectors:<\/a><\/p>\n
#accordion {\n\twidth: 500px;\n\tmargin: 100px auto; }\n#accordion div {\n\tfloat: left;\n\twidth:25%;\n\theight: 300px;\n\toverflow: hidden;}\n#accordion:hover div, #accordion.hover div {\n\twidth: 20px; }\n#accordion:hover div:hover, #accordion.hover div.hover {\n\twidth: 440px;\n\toverflow: auto; }<\/pre>\n
Even Easier with jQuery<\/h3>\n
Those of you who have been reading for a while know that I\u2019m 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\u2019t currently using  jQuery, this script might be a bit overkill, as it\u2019d require your users to download a lot more code in the long run (our tiny script plus the jQuery framework). But if you\u2019re already using jQuery, this cuts our heavy lifting down by quite a bit:<\/p>\n
$(document).ready(function() {\n\t$(\"#accordion, #accordion div\").mouseover(function() {\n\t\t$(this).addClass(\"hover\");\n\t}).mouseout(function() {\n\t\t$(this).removeClass(\"hover\");\n\t});\n});<\/pre>\n
This script does the same thing as our longer JavaScript above, but with far less code. <\/p>\n
So that\u2019s all there is to it! You can see a demo of this in action here.<\/a> The accordion should function just fine in all major browsers with our without JavaScript enabled, and will function in IE6 with JavaScript. Enjoy!<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
A while back, I wrote an article demonstrating how the accordion effect could be replicated with nothing more than CSS. There was one caveat, however: the technique didn\u2019t work in Internet Explorer 6 due to its limited support of :hover. Today I’m revisiting the CSS accordion technique and will make a modification or two that will let it work with IE6. […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,184],"tags":[200,79,283,51,54,55,291],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/311"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/311\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}