Lightweight JavaScript Accordion with CSS

« Mapping Using the Google Maps API & PHP

Custom Digg Counter in WordPress with PHP »

18
Apr

Lightweight JavaScript Accordion with CSS

Posted by Michael in CSS, JavaScript

The JavaScript accordion above is only 1.5kb. If you have a small project that could use an accordion and don’t want to include an entire JavaScript framework to do the job then give this script a try.

You will need to call the following function in your body onload where the first parameter is the div id of the accordion parent and the second tells the script which section to expand onload.

slider.init('slider',1)

There is no other JavaScript that needs to be added to the HTML. The onload function parses the children of the parent accordion div and adds the appropriate mouse events to the headings. This has been tested in Firefox 2/3, IE 6/7/8, Opera and Safari.

Click here to download the source code.

Updated 5/27/2008 - Slightly minified the code cutting off 1kb and added the script into a global namespace.
Updated 6/19/2008 - Shaved of a few bytes and added change the “c” variable to identify which section to be expanded onload.

3 Diggs

64 Responses

in the source code imported js file is not the same name that in the folder remove the additional js in the html or in the js packed file

priyantha on 19 Apr 2008 at 7:15 am

Sorry about that, the source zip should be correct now. Thanks for letting me know.

Michael on 19 Apr 2008 at 9:21 am

<strong>Lightweight Accordion with JavaScript and CSS…</strong>

Lightweight Accordion with JavaScript and CSS…

roScripts - Webmaster resources and websites on 20 Apr 2008 at 10:15 am

Well done, the effect and animation are very elegant, especially for a framework-free script.

Tobias on 23 Apr 2008 at 2:57 am

Very good. Why don’t you make all this accessible by the use of keyboard (tab + space/enter)? Accessibility is very important. And what about those who doesn’t have JavaScript enabled? Is this going to work?

Sorry bad English.

flashfs on 24 Apr 2008 at 9:55 am

@flashfs - I will take a look at incorporating keyboard navigation, thanks for the suggestion. If JavaScript is disabled all of the boxes would simple be expanded, it degrades nicely.

Michael on 24 Apr 2008 at 10:22 am

Hello Michael.

Great work on this script. It works fantastically. I have it working in IE and Firefox perfectly. I have not tested Opera yet, but I do know that Safari has an issue with it. Upon hovering your mouse over the togglers, the toggler background turns a whitish color.

Sean Cheatham on 27 Apr 2008 at 1:15 pm

@Sean - Thanks for the comment. I had not noticed the demo on this page was gone (back now) but it does work in the latest version of Opera without any issues. Or you can go to http://sandbox.leigeber.com/slider.html. What version are you using? I will definitely check it out when I get a version from you.

Michael on 27 Apr 2008 at 1:31 pm

Hi,

Works perfect, great script. Only thing is that it stutters al little in Firefox? But it’s really smooth in IE. Any ideas how I could sove that?

Bas on 29 Apr 2008 at 2:15 pm

@Bas - The primary reason for that is the top two boxes have almost the same length of content. Check out http://sandbox.leigeber.com/slider2/slider.html which demonstrates a more realistic example where the content is of different lengths in each box and therefore the bottom bar has to move instead of just sitting in place and shaking. I updated the demo so it didn’t show the issue as badly. I have no idea why Firefox does it but to implement a fix would not be pretty. Definitely open to suggestions.

Michael on 29 Apr 2008 at 2:25 pm

Thx for the quick reply. Why wouldn’t it be pretty to implement a fix? If it would work just as smooth as it does in IE, that would be really nice.

Bas on 29 Apr 2008 at 2:33 pm

@Bas - The end result would be pretty but my thoughts on how to alter the code to force it to look more fluid are not. Take a look at it in FF beta which will soon be released… very smooth. I imagine most FF users will upgrade very quickly as apposed to the rate at which IE users typically migrate. I will give it another look and if I find a resolution I will update the post. Thanks.

Michael on 29 Apr 2008 at 3:10 pm

Great Idea!! I think that include it in my pages!! It’s tooooo easy!!

Bye!!

DottorZed on 30 Apr 2008 at 5:05 am

Nice. I’ll give FF beta a try, thx! Looking forward to it.

Bas on 30 Apr 2008 at 7:31 am

Great!
Only one problem with JS disabled: header 3 disappears completely :((

(Win 2000 with Firefox 2.0.0.14 and web developer toolbar to switch JS on/off)

Pierluigi (Italy) on 30 Apr 2008 at 7:47 am

@Pierluigi - The demo above is in an iframe so when JS is disabled they are all expanded and therefore the last one expands below the height of the iframe. You can visit the page directly at http://sandbox.leigeber.com/slider.html to try again.

Michael on 30 Apr 2008 at 7:52 am

Well, you’re right!
It would seem quite impossible you hadn’t tested it deeply

Thanks for your quick reply!

Pierluigi on 30 Apr 2008 at 7:58 am

[...] Lightweight JavaScript Accordion with CSS - Web Development Blog (tags: CSS javascript accordion menu slider webdesign tutorial **) [...]

links for 2008-05-01 « Simply… A User on 30 Apr 2008 at 6:42 pm

But when I print the page out, I need all text to be printed. Please include CSS print styles that will ensure all text within the slider is actually printed. Can you do that? It would be perfect then

Henry on 30 Apr 2008 at 11:02 pm

@Henry - It would actually not work as you are used to unless JavaScript is disabled. Since the JS goes through on page load and collapses the divs after calculating their heights any print CSS would be irrelevant. You could create a print button and call a function to expand all the divs and then call the window.print() function. Probably not what you are looking for but if you decide to go that route and need help just shoot me an email.

Michael on 30 Apr 2008 at 11:21 pm

[...] Lightweight JavaScript Accordion with CSS - Web Development Blog (JavaScript,CSS,Design) [...]

fritz freiheit.com » Friday link dump on 02 May 2008 at 2:36 pm

Is it just me, or does the text section look really terrible in IE6? Like it’s been scaled or something?

Pete on 06 May 2008 at 2:19 pm

@Pete - Just tested more in IE6 and don’t see any issues. The text looks just like it does in other browsers. If you could send a screenshot to me at michael@leigeber.com I can take a look. You might also try testing the slider directly at http://sandbox.leigeber.com/slider.html. Thanks for reporting the issue.

Michael on 06 May 2008 at 3:04 pm

Thanks Michael, have dropped you an eMail. The only difference I can see is I run IE 6.0.2900. I tried it on your direct link and again it looked bad. Pete

Pete on 07 May 2008 at 7:12 am

[...] you haven’t noticed, the search bar, RSS links, and category links are all contained in a lightweight javascript accordion - though I am considering [...]

plainbeta’s New Design - Pier 3 | plainbeta on 08 May 2008 at 9:39 am

Hey Michael,

This is a nice script and i would like to put it in a site.. With FF this is nice, but with IE (6 and 7), there is a weird thing.
If you can take a look at http://www.gestisoft.net/ftps/nicolas/bdh you will see that “ANGERS” “PARIS” “SAUMUR” is very unstable on IE ..

I dunno why

Buzz on 13 May 2008 at 3:03 pm

@Buzz - Your site is looking very nice. There are some issues with your markup which may be causing the issue. Try running your site through the W3C validator and you will see a number of errors. Right off I don’t see anything in the accordion markup itself that raises any flags. Once you get it closer to validating shoot me an email at michael@leigeber.com and I will take another look if the issue persists.

Michael on 13 May 2008 at 3:21 pm

Michael - Can you have the accordion stay active (ie. with hover open) on certain pages? If you click within a submenu (which is what I am using it for) on the next page it closes the element.

Paul on 21 May 2008 at 12:06 am

@Paul - A little confused as to what you are asking, the answer is probably yes with some customization. You refer to it staying open until the next page opens… shoot me an email at michael@leigeber.com and a link so I can check out where you are so far.

Michael on 21 May 2008 at 7:57 am

[...] Accordion solo CSS e javascript [...]

diploD » Blog Archive » Parlando di javascript.. on 23 May 2008 at 1:13 am

Great work! Can you do this same accordion, only horizontally? i would love to use it on a site.

Abraam on 24 May 2008 at 8:08 pm

Is it possible to alter the code so that all content is hidden upon page load?
If so what might need changing?
Thanks

dflynn on 31 May 2008 at 12:00 pm

@dflynn - You could just change the CSS, no need to alter the JavaScript. Shoot me an email if you have trouble.

Michael on 31 May 2008 at 2:09 pm

Ahh! Got it, in the <body onload=”slider.init(’slider’,1)”> tag, I didn’y realize I could change the 1 to a 0 to achieve this. Thanks for the help!

dflynn on 01 Jun 2008 at 7:48 am

this script seems to be having issues when i use paragrph tags in ie6 the bottom of the text gets clipped by around half a line.

http://79.170.40.161/cncareers.co.uk/index.php?option=com_content&view=article&id=4&Itemid=10

is this a known issue or do i need to make changes to the js? i have played around with it but cannot get it to display correctly in ie6.

Tom on 09 Jun 2008 at 7:25 am

@Tim - Shoot me an email with a zip of your accordion including the content. Should be able to resolve the problem in the CSS but it is hard to look into without your code in front of me, especially in IE6. michael@leigeber.com

Michael on 09 Jun 2008 at 9:06 am

Hi,
How can i use it on a page that has a Master page
Thanks,
Winceth

vVinceth on 09 Jun 2008 at 12:41 pm

@Michael - Can you place a “+” when a tab is minimized and then just replace it with an “-” ?
Thank you, you’re doing a nice job here.

vlad on 10 Jun 2008 at 9:48 am

@vlad - This could be accomplished through the CSS possibly or though JS. I don’t think I will be adding it to my accordion here, if you need help implementing it yourself shoot me an email.

Michael on 10 Jun 2008 at 3:09 pm

Wonderful code and very diverse. I can use this on any type of site and it would look wonderful.

Michael. Do you mind looking at this code and telling me why I cannot get my first slider to open using the “slider.init(’slider’,1)”

<div class=”colTwo” id=”slider”>
<div class=”bloc_top”>
<div class=”heading9″ id=”one-header”>
<h2>HEADING</h2>
</div>
</div>
<div class=”bloc” id=”one-content”>
<div class=”image12″ ></div>
<div class=”contentblock” >

<p>CONTENT</p>

</div>
</div>
</div>

Culvi on 11 Jun 2008 at 2:52 pm

@Culvi - Is the <div class=”bloc_top”> necessary? Shoot me an email with a link to your demo or a zip of the entire accordion code you are using.

Michael on 11 Jun 2008 at 8:56 pm

Michael,
How difficult is it to convert this into a nested accordian? Have you dont this already?

Thanks
Venky

Venky on 13 Jun 2008 at 9:05 pm

@Venky - I have not done it yet but it would not be a hard thing to do. Shoot me an email if you try it and run into problems.

Michael on 14 Jun 2008 at 3:27 pm

I need 2 differents box in the same page, how I can make this?

jose.rojas on 14 Jun 2008 at 4:06 pm

Thanks for your great script. I have implemented it on my website (for the faq’s). But I have one question though. I noticed that the full content of the accordion is displayed in the browser when it loads the page. Once it is done loading, the script closes the accordion (with slider.init(’slider’,0)). Is there anyway the script can be configured to not show the content of the accordion during load time ?

Jan Alphenaar on 16 Jun 2008 at 8:27 am

@Jan - Since the total height of the div must be calculated to pass into the animation function the content must be displayed at some point. In your situation it may make the most sense to calculate the height once a user clicks on a section and not onload. The calculation should happen so quickly you don’t see the flicker. Shoot me an email if you need help working it out.

Michael on 16 Jun 2008 at 10:35 am

Michael - That is a great clean code! In your code, by default the first header is open (if enabled) - how can I make the second (or third, etc.) header open as default?
Thanks, Alain.

Alain on 16 Jun 2008 at 4:03 pm

@Alain - Shoot me an email and I can help you work through it. A little JS modification will be needed, nothing too difficult.

Michael on 16 Jun 2008 at 4:05 pm

Is there a way to improve performance? i heard from multiple testers that this is very slow on their machines. like.. is it possible to increase the step size in the animation algorithm?

omega on 17 Jun 2008 at 11:42 am

@omega - Sure, there are variables to speed things up but I cannot imagine there being a performance issue unless you are on an original Intel. Of course different browsers will handle the speed a little differently. Shoot me the details via email so I can investigate. Thanks.

Michael on 18 Jun 2008 at 8:17 am

On the headers, is it possible to make the text alone a link to another page, but allow the box to activate the accordion?

Eddie G on 18 Jun 2008 at 3:42 pm

@Eddie - Sure, you could just an an <a href in there. It might be a little confusing to work with though as a user.

Michael on 19 Jun 2008 at 8:09 am

This is some VERY nice scripting, Michael. And after having browsed several of your other JS utilities, in my opinion, you are light years ahead of most who consider themselves gurus. What I am amazed at most of all is the SIZE of your JavaScript. Unbelievable!!?!! I found several accordions before discovering yours. One: http://dbajax.sourceforge.net/ … my GOD!…the amount of JS needed to run it (and not EVEN so smoothly) was a scary sight to see.

But to revisit Jan’s posting (Jan Alphenaar on 16 Jun 2008 at 8:27 am) and your reply therein, with any page that has a lot of content…seeing the entire table loaded before the accordion snaps to the collapsed position is not so pleasant. If you are willing and have the time to share, I would be very interested to hear how it is possible to “calculate the height once a user clicks on a section and not onload”. I set-up a temp page with additional content below the accordion in order to see the delay before the accordion’s collapsed state: http://www.quikstage.com/test_slider.php

Again…Awesome Coding!

David

David Carriger on 23 Jun 2008 at 6:59 am

@David - Thanks for the feedback. Basically all the divs would initially have their display set to none. Then, the first time a user clicks and individual section the script would momentarily expand the section just long enough to calculate the offsetHeight of the div and then reset the height to 0px. Shoot me an email if you need help with the code.

Michael on 23 Jun 2008 at 1:49 pm

Hello Michael…I attempted adjusting the class=”content” divs to display:none, but of course, this simply negates the ability to ever SEE those divs, right?

I am thinking that there would need to be some sort of onclick command applied to the now hidden “content” divs in order to have them show again, am I right? And since these divs are all manipulated through ID’s in the slider.js file, I am also thinking that is where the manipulation would have to take place.

Yes, thank you…if you can share with me how to code this, I am all ears.

David Carriger on 24 Jun 2008 at 2:20 pm

Thanks for the script Mike, it works perfectly . . . one thing though, is it possible for expanded elements to stay expanded unless it’s clicked again?

the SaNdMaN on 26 Jun 2008 at 1:10 pm

@the SaNdMaN - Sure, you would just need to comment out a few lines of code. If you cannot locate what needs to be removed let me know and I will point you in the right direction. michael@leigeber.com

Michael on 26 Jun 2008 at 8:21 pm

Hello,
Just a question : what have I to change on the code if I want the same effect with “onMouseOver” ? It is possible ?
Thanks

Metcalfe on 30 Jun 2008 at 2:46 am

@Metcalfe - That should be all you have to change, just the mouse event on line 10. If that doesn’t do it shoot me an email.

Michael on 30 Jun 2008 at 6:13 pm

I don’t know if this has been answered earlier, but here it goes. Is there a way to define the active accordion header. For example if I want a green background for the header of the active accordion but blue background for the non-active accordion’s header.
I hope you understand my issue.

Thanks in advance!

Henri on 01 Jul 2008 at 2:55 am

@Henri - I totally understand your question. Right now the headers are only using the :hover CSS property. To accomplish what you are looking for you would need to change/append the class name to the header within the JavaScript itself. Shoot me an email if you can’t figure out where to place the update in the script.

Michael on 02 Jul 2008 at 7:58 am

wondering about using this, but need to have all of the sections defaulted to closed.

this possible?

CX on 07 Jul 2008 at 3:40 pm

I love the slider code - nice job!

Sorry to return to a topic already covered (16 Jun 2008 at 10:35 am) but I don’t know enough about javascript to make the adjustments to not display the contents on load. Have you put in the time to make the adjustments and if so, would you be willling and able to email me adjusted code?

Thanks!

AC on 10 Jul 2008 at 1:52 pm

@CX - Sure, remove line 13 and the else statement on line 14.

@AC - Take a look at the source - http://sandbox.leigeber.com/slider5/slider.html

Michael on 11 Jul 2008 at 5:57 pm

Trackback URI | Comments RSS

Lightweight JavaScript Accordion with CSS

64 Responses

Leave a Reply