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 1.65 kilobytes when packed. 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 (0/1) tells the function whether to expand the first section or not.

slider('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.

3 Diggs

27 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

Trackback URI | Comments RSS

Lightweight JavaScript Accordion with CSS

27 Responses

Leave a Reply