Accordion

This updated accordion script is powerful and lightweight at only 1.2kb. It now includes multi-level support, the option to allow multiple panels to expand concurrently, and a hide/show all toggle. I have reverted the markup to a div based structure to eliminate any validation issues with the definition tables in the previous version. Check back for more posts and scripts soon.

To initialize an accordion use the following code:

var accordion=new TINY.accordion.slider('accordion');
accordion.init('accordion','h3',0,0,'selected');

You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion “ul”, the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Update 6/16/2009

The script has been updated with a couple bug fixes, performance tweaks, and feature requests. I also shaved off 0.2KB.

You can now expand a particular section by its index, for example parentAccordion.pr(0,1), with the second parameter being the index of the section. If you don’t want any section to be expanded by default then use -1 for the initially expanded index in the initialization function, example accordion.init(“accordion”,”h3″,0,-1,”selected”). The script is also no longer tied to a strict doctype. If you are using this along with Flash, be sure to set the wmode property on the SWF object.

Click here for the demo.

Click here to download the source code.

Posted by Michael in JavaScript on March 3, 2009

170 Responses

I have to say that that’s brilliant. I’m on my iphone at the moment and that is the smoothest display of iPhone javascript that I have ever seen!

Keep it up!

conor on March 04, 2009 at 2:47 am

Thanks, it’s the best javascript accordion I’ve seen so far. easy to use, nice work.

Snoupix on March 04, 2009 at 4:23 am

That’s one great little accordion menu!

Church Website Design on March 04, 2009 at 2:02 pm

“I have to say that that’s brilliant. I’m on my iphone at the moment and that is the smoothest display of iPhone javascript that I have ever seen!”
Indeed!

Liza on March 04, 2009 at 8:26 pm

This is amazing. How about multi-level support for horizontal accordion script?
Thank you.

Eugene on March 05, 2009 at 12:25 am

Bravo !
Your components are realy golden stones for web GUI developpers.
I can’t imagine what you will propose in 2010 …

Denis on March 05, 2009 at 5:43 am

Very nice!
One issue I have with these accordion is the fact that the font inside the expanding accordions “are not cleartyped” (in IE7). That is, they look very thin. Someone has a solution for this?

Peter Schotman on March 05, 2009 at 7:12 am

Very nice! The only gripe I’ve had is that I did not include the doctype in my own page and TinyAccordion threw a fit at me when using IE. Took me quite some time to figure that out :-)
Other than that, it works very nicely ! Thank you :-)

Jani on March 09, 2009 at 12:07 am

@Eugene – I will add it to the to-do list.

@Peter – I will look into the issue.

Michael on March 09, 2009 at 7:24 am

Very nice! Thanks!

One issue I’m encountering is when I try to create an XMLHttpRequest object on a page that uses the TinyAccordion component, the TinyAccordion no longer works. It appears fully expanded and will not respond to mouse-clicks. Any idea what might cause that? I’ll keep looking – I’m definitely new to javascript and AJAX.

Derek on March 09, 2009 at 8:28 am

I apologize. It appears to work with a small bit of tweaking. Thanks so much!

Derek on March 09, 2009 at 8:31 am

Really nice functionality and effects, but the source code it’s a litle hard to read. My suggest it’s to use more clear variable names. Good luck!

Sanbor on March 09, 2009 at 8:34 am

First of all: wow! this is awsome!

Has anybody tried to impement this into a wordpress theme? I’m having a hard time right now because this script doesn’t seem to like php generated lists.
Any help, comments or thoughts are welcome!

Alex on March 11, 2009 at 2:05 am

I am having trouble getting flash objects to hide properly when enclosed inside one of the tabs. check out http://www.chrismarsden.com/projects/themetester/?page_id=6. It only show s up as a problem in Firefox on Windows. works great on my mac.

Any thoughts?

Chris Marsden on March 12, 2009 at 9:18 pm

Hello people,

Can someone help me? My accordeon is halfway open when you first enter the page. But i want him to be closed when people enter the page.

Please help me…..

Ronald

Ronald on March 13, 2009 at 1:48 pm

There are 2 things I’d like to address here with the accordion:
1- When it displays first time the content display with bold font and after hiding and displaying again it show the content without bold.
2- How to make it expands multiple levels but not all levels when it’s first time loading the page
Anyway, this script is brilliant and amazing. Thanks
Hung

Hung Tran on March 13, 2009 at 4:40 pm

Super script and source code!! Thanks a ton.

One item: I would really like the menus to all be “closed” when you first enter the page, but not sure what to change in the code to make this happen. Anyone have any ideas where to make the changes on this to make it happen?

James on March 16, 2009 at 8:18 am

Fantastic! I Love your website and have bookmarked it. I used them and they worked fine for me.

I’m also looking for those cool accordions like they have on the Apple website. The ones that are activated with either a mouseover or onHover.

Danolo on March 16, 2009 at 10:35 pm

Great script, but does anyone know how to nest another level? Basically in here I want another nested menu inside the first nested menu. All I need is three layers instead of two but can’t figure it out for the life of me!

BSteck on March 18, 2009 at 3:17 pm

I like it! Looks great but more importantly, its easy to implement and sooo lightweight!

Great work!

Goodings Media on March 21, 2009 at 11:57 am

Thank you! Thank you very much!
I was working on a script of my own, after realizing that jQuery and Scritptaculous were just too much of an extra load, and this is far better than what i’ve done so far!

Thank you!

Tim on March 23, 2009 at 3:44 pm

Fantastic! I Love your website and have bookmarked it. I used them and they worked fine for me.

I’m also looking for those cool accordions like they have on the Apple website. The ones that are activated with either a mouseover or onHover.

nishit on March 28, 2009 at 8:35 am

Michael, I have the same issue as Peter, that the font is not as readable in IE after the div has been closed and reopened. I LOVE the script because it is so lightweight and easy to use, but I cannot use it until I can figure a way around the font issue in IE. The problem is especially noticeable in the red links in the PROMO CLIPS section in this page:
http://www.realrelationships.com/media/t_main.asp

I’m looking at your code and doing my own (feeble) experimentation, but really hope you have a workaround/solution for us. IE is so prevalent that I cannot ignor ehow it workjs there. :-( THANKS AGAIN for a great script.

Deb Fahey on March 29, 2009 at 12:30 pm

For all those who have asked about the ClearType issue with IE. Whenever a filter is applied to an element Microsoft disables ClearType. I cannot find a resolution to this issue. A couple options to consider:

-Disable ClearType for the menu from the start by adding the alpha filter with opacity set to 100 in the CSS for the sections.

- Set the filter to an empty string on line 30 after the animation is complete to reset the ClearType.

- Remove the filter references from the script to disable the opacity tween in IE only, only the size animation will remain.

Michael on March 29, 2009 at 1:27 pm

THIS IS AWSOME!!! i just have one problem : (
i cant get the accordion to have multi level after the first main section has it.
the multi level only works on the first main section it comes to…
ughh!! other then that its so easy to put in and work with. good job!

Kirk on March 31, 2009 at 11:52 am

hi. i use another level. it is expanding and collapsing at the first 1. but when i put the same again it wont work. ill mail u the code. is that is my error or a bug in the script.

anuja on April 01, 2009 at 12:17 am

^ i have the same problem!

Kirk on April 01, 2009 at 2:15 pm

This is amazing. How about multi-level support for horizontal accordion script?

Rabindra singh on April 07, 2009 at 12:22 am

great job! this is it :) ) i was looking for some nice accordion, but any of them weren’t working with rest of the plugins. Anyway your thiny accordion is working great, and finally I found perfect resolution for my coming soon website :) thnk you ;)

Irka on April 07, 2009 at 7:57 am

Даже друзьям разослал ссылку на эту запись!

Протасов on April 09, 2009 at 10:55 pm

Hi,

Michael, I must first admit that this is wonderful tool and some awesome js programming that is beyond my understanding…

But any ways, the requirement I have is a very easy one and I would be glad if you can help me out on this. I am still using your old accordion…i mean not nested one…I just want to have a additional link on tab 1 that can navigate to tab 2, and a link on tab 2 that can navigate to tab3.

Just a way to navigate between tabs…

Thanks

Jhonny on April 12, 2009 at 8:11 am

Hi,

I made an uncompressed version of the script, with full function/variable names and some little documentation. Handy for debugging!

You can download it at http://www.savefile.com/files/2076726

Rekcor on April 14, 2009 at 3:02 am

Please note the doctype:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Otherwise it will not work in IE…

Rekcor on April 14, 2009 at 3:05 am

Thanks for the script…
I have three issues I need help with.
1) When I install it on my site it goes veerrrrrrrrrryyyyyyyy slowly.
2) I want the sections to start closed, they are all open when the page is loaded
3) the sections will open, but the other sections won’t close.

Thanks for your help!!!

Kathy on April 17, 2009 at 9:03 am

Hi everybody and thanks Michael for creating such nice script!

But I have one very complicated question for me… :) )) Don’t judge me too much, but can anyone explain exactly how it works?

I’m a newbie in JavaScripting and spent all day today trying to make something the similar.

Thanks.

John on April 18, 2009 at 11:27 am

@Kathy
I had the similar problem. What is your document’s DOCTYPE? Check my comment on 14 Apr 2009 at 3:05 am.

@John
Did you download my uncompressed script? (see my comment on 14 Apr 2009 at 3:02 am) With that, you should be able to see what happens

Rekcor on April 20, 2009 at 1:12 am

This is a great script. I am having a problem that the font inside the slider looks different than the other fonts (a little bitmapped). What style can I use to change that?

Albert on April 21, 2009 at 6:25 am

@Albert: this is not possible, check Michael’s post on 29 Mar 2009 at 1:27 pm.

Rekcor on April 23, 2009 at 2:00 am

Excellent script, but is inaccessible through the keyboard. How could you identify the headings by class so they could be links instead of headings and thus fire onclick events through the keyboard while still allowing other links in the accordion sections.

Christian on April 25, 2009 at 11:51 am

Hi

Does anyone know how when, using this accordion as a common menu several on webpages using SSI, you can make the restof the text indented all the way down the page to the same level, rather than wrapping under the bottom of the accordion? I know I could change the height parameter but this would make short pages have loads of scrolling due to the extended length of the menu. Is it possible to make it autofit page height?

Stagecoach on April 26, 2009 at 11:18 am

@stagecoach:

This is more of a layout problem. An easy way to solve would be to enclose the content in an additional div and float it to the opposite side.

Christian on April 26, 2009 at 11:31 am

Thanks for the reply – I’m still getting to grips with web design.
Probably another supid question, but how come I can only make this file work provided I dont want to call it anything other than index.html? I’ve tried saving it as menu.html and using it, but when I do that, it just shows up gibberish in a browser. Is there something else I need to do to rename it rather than just “save as”?

Stagecoach on April 26, 2009 at 3:49 pm

I gratitude for your nice script, but I found a problem that I think it is considerable. When I remove “nested” level block, The browser indicate the error. For example, Firefox 3 says “a is null (line 9 on script.js)” on this occasion. Do you know about this? If this problem is beyond your check,　could you fix this problem? (Sorry but I cannot write javascript, so I cannot fix this.)

mataroh on April 27, 2009 at 9:17 am

I am finding that in IE only, as the menu’s are closing there is a stutter and makes things look rather odd. Other browsers are just fine. How can we get around that?

Adam on April 29, 2009 at 3:52 pm

@Christian: did you check the uncompressed version of the script I made? (Rekcor on 14 Apr 2009 at 3:02 am). In that version there is a function

slider.headerElementOnClick(doOpen, clickedHeaderElement), in which {boolean} doOpen determines whether to open/close a certain section and the {DOM object} clickedHeaderElement is the section’s header element.

So I suggest you write an additional function like

slider.prototype.toggleSection = function(sectionNumber){
var headerElement = this.headerElements[sectionNumber];
headerElement.onclick(true, headerElement);
}

Which you can fire upon some keyboard input.

Rekcor on May 04, 2009 at 1:19 am

@Adam, please read Michael on 29 Mar 2009 at 1:27 pm

Rekcor on May 04, 2009 at 1:23 am

@mataroh: what happens if you use my uncompressed version (see Rekcor on 14 Apr 2009 at 3:02 am) of the script? What errors do you get?

Rejcir on May 06, 2009 at 5:21 am

I came across this site and found the accordion perfect for my portfolio site (mrsunnyz.com) currently using simple hide/show function. But as soon as I implemented the sub-level nested structure into 2nd part (i.e. Part One > chapter 1/chapter2/…, then Part Two > chapter 6/chapter 7/…) it stopped working. I struggled to figure out a simple solution but failed. Can Michael or anyone here shed a light? Thanks a lot!

mrSunnyZ on May 14, 2009 at 12:17 pm

Thank god I finally figured out how to fix the above mentioned problem – now my portfolio works a lot more smoothly than without the sliding effect, though there are a few minor problems in FF, including redraw problem at the bottom. Thank you Michael for your excellent script, best of the kind that I’ve seen!

mrSunnyZ on May 16, 2009 at 12:07 am

Well, thanks for the excellent script mate. I have a simple question. Lets say there’s submenu same as in yours(nested). When I want to add 2nd “About-together with submenus”, it stucks working. I mean, only 1st “About” works on clicks, 2nd one shows all open. How can I make this work too?

Thanks

Ugur on May 18, 2009 at 5:23 am

@mrSunnyZ: can you please share with us how did you handle that? I’m looking for the same solution…

Ugur on May 18, 2009 at 2:37 pm

WOW! I’m a superstar at my office, everyone loves this! Thank you So much!

Abicus on May 20, 2009 at 1:37 pm

Thanks for sharing this Accordion to us…its light weight and easy to integrate..really stunning work

Faizan on May 26, 2009 at 3:57 am

I too am too poor to pay for support. I think this code is awesome but I also cannot figure out how to add another nested submenu to the second menu item without it sticking open. What am I missing. I wish the code gave you have provided added another submenu under the second menu selection. This way it would be easier to add nested menus.

Michael Thomas on May 27, 2009 at 11:25 am

hi, this is a great solution to the bloated version that is in the jquery UI. is there a way to prevent an active panel from being closed when it is clicked on again? in otherwords, ensure that one tab always remains open.
thanks!

samm on June 01, 2009 at 7:50 am

Hello, great work ! Very useful, but I need some help : I use the original html file, I copy the content of “about” (the entire <div class=”acc-section”>)and copy it in the “instructions”, but the content of “instructions is expanded and can not be collapsed. What I have to do ? Thanks ;-)

Amihafreak on June 02, 2009 at 7:56 am

A lot of people here have asked if it is possible that the menu is closed when the site is opend and I didn’t find any awnsers for that question. I’m also intrested if there is a solution for that. But besides that it’s a aweseome script.

KristjanJo on June 04, 2009 at 8:46 am

I did it! Just change
var parentAccordion=new TINY.accordion.slider(“parentAccordion”);
parentAccordion.init(“acc”,”h3″,false,0);

to

var parentAccordion=new TINY.accordion.slider(“parentAccordion”);
parentAccordion.init(“acc”,”h3″,false,-1);

:)

KristjanJo on June 04, 2009 at 9:09 am

@mataroh i’ve got the same problem on line 9 The browser indicate the error. For example, Firefox 3 says “a is null (line 9 on script.js)” I’ve tried the uncompresed script but still have an error, does anyone have the solution?

mathieu on June 08, 2009 at 2:14 pm

ok i just put this in the uncompressed scripts if (listElements==null){ return;}

mathieu on June 08, 2009 at 2:22 pm

Is there anyway to call this script from within the head of the document? Whenever I put the initialization code within the body of the document, it seems to conflict with any absolute positioned images that I have on the same page.

CK on June 08, 2009 at 3:08 pm

GREAT AND USEFULL SCRIPT!!! But I just have one problem : (
I cant get the accordion to have multi level after the first main section has it.
the multi level only works on the first main section it comes to…
Can you solve my problem. Many thanks and good job!

Giovanni on June 10, 2009 at 3:11 am

Look, I've been testing this script on Safari 1.3.2, (OsX 10.3.9), it works but submenu expand itself very slowly.

Davide on June 15, 2009 at 7:56 am

I'm completly stunned by all those genious scripts on your website.
Many great thanks to you!!!

Mischa on June 16, 2009 at 8:31 am

For those of you who don't want the hidden tabs to show momentarily onload. Simply set the height of the section div to zero:

<div class="acc-section" style="height:0px">

Sam on June 29, 2009 at 3:11 am

has anyone noticed that there i a stutter/flicker in IE6 on load? it shows the whole menu for a split second but long enough to read it. thanks! very cool, and works very well with lightbox on same page!

codyde on June 29, 2009 at 1:14 pm

How do I change the speed of the animation? I see interval of 20, but if I change that to 1, the animation is still too slow for my taste.

Sam on June 30, 2009 at 12:05 am

That was stupid. I changed the /5 to /2 and I like it now.

Sam on June 30, 2009 at 10:42 am

@ Sam
I too was looking for a way to hide the tabs momentarily on load. Your solution works IF the user has javascript enabled (which we are hoping they have so they can view the accordion in the first place). However, using the height:0px; style will eliminate the fact that normally the script would degrade gracefully with no javasctipt. Without the height:0px; piece if the user has javascript turned off, they'll see all the content, no problem. With the height:0px; the content is all hidden with no javascript.

Anyone care to make a suggestion?

mshetler on July 10, 2009 at 6:20 am

i have something of an issue, we implemented the tiny accordion across the site – now we want to disable the sliding behavior, and just show sub level nav. trying to void switching out javascript. is there a way to turn off the collapsing behavior all together?

codyde on July 11, 2009 at 1:01 pm

Is a great work.
However, may i ask is it possible to allow only at least 1 section and only 1 section to be showed? In other word, users are not allowed to close all or open all.

Ken on July 12, 2009 at 7:49 pm

i want to open selected menu, when page will reload. I means is there any options to open selected menu link with expand when any page will open after click on any menu link ? This will help to user that which menu is expanded at currently. I dont want that when any page reload then all menu collapse or only selected menu expanded. I want that by default last selected menu should be expanded when page will load. Is it possible ?

Atul on July 20, 2009 at 9:44 pm

Hi

This looks great, is it possible to achieve the following:

When you lick on one of the Header links eg Instructions thats the only menu you see, all the others fold up, instead of having to click on the link again to make that one scroll up, hope that makes sense.

Thanks

David on July 22, 2009 at 10:52 am

Hi
just a question. i already used the simple one and it was great, but now i need this one because of the levels, but i saw that dont have the 3 statements styles like the simple one. its is possible to have a style on the primary one and other style on inner one? and also the the closed, hover, and open styel in both?

Regards

Vitor on July 24, 2009 at 5:17 pm

Hi, I need to apply your tinyaccordion to a CD tutorial for a client.
I need to do pages with simple acordeon.. OK, pages with 1 subaccordeon… ok, pages with 2 or more subaccordion… I CAN´T…
and I need to do some peges with a 3rth level….

well, I need the example codes for the different options, we do the html pages.

This is possible? How many time (minimun possible)? How many $$? and How I make the payment.

diego hurtado on July 27, 2009 at 1:03 pm

Hi Michael – Another amazing script !!

A quick question (To everyone) : Is there an easy way to add AN OTHER instance of TinyAccordion somewhere else on the SAME PAGE (2 TinyAccordion in 1 page) ?

<ul class="acc" id="acc">T.A.</ul>

Mike on July 27, 2009 at 4:04 pm

Perfect script!

I only have one small problem. I would like to use more than one accordian in my page like Mike above. Is this possible? If it is, this is the best accordian script I've seen out there!

thanks

Xavier on July 29, 2009 at 5:59 am

Hi, Thank you for the excellent script. I modified and work fine. But it show me an error. "Done, but errors on Page" then it show me "Line:10 Char: 23 Error: Object required Code:0". How I can fix it. Thank you very much…..

Marie on July 30, 2009 at 7:41 am

Does anybody know how i can manipulate the active level-headline in the CSS?

Christian on August 03, 2009 at 8:41 am

Okay, I've just found the fix to only have one section open at any one time – i.e. You open section one and then click section two. Section one automatically closes and section two opens!

This is the solution to Ken and Davids problem. Here's what you need to do:

Find this js line in the html code and change the "0" after the "h3" to a "1" as per the following example:

var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",1,0);

Enjoy, and thanks to the coder of this wonderful script!

Clive on August 04, 2009 at 4:39 pm

Being a bit of a novice, I'm wondering if anyone can tell me how I could alter the script so that instead of just one nested layer showing when you first click on the header, all nested layers under that header show. Any help wildly appreciated!

erin on August 07, 2009 at 3:03 pm

This is great but would be perfect if it worked with cookies to keep the menu in the state the user has it at as they load different pages. That would be great for usability, instead of the user wondering where the menu went when they click a link, and having to re-open the same levels to find the list they were just navigating. ((I'm trying to work on it and I've seen it done with single-level accordion menus))

Jenna on August 10, 2009 at 9:54 am

Ok, I solved my problem without cookies, by just changing the line of code on each page that passes the variables to the script, you can tell it which menu should be open on that particular page. (Just like Micheal says in the update to this post!)

This might help Atul above too.

Jenna on August 10, 2009 at 11:30 am

Has anyone solved this problem:
Being able to do this:

Pad One
Sub1
Sub2
Pad2
Pad3
Sub1
Sub2

I know I'm Not the only one with this problem.

MH on August 12, 2009 at 11:52 am

For those of you still having trouble with configuring how layers open/close, see the details Michael added at the end of the post under "Update 6/16/2009"

Still would like to hear from someone that was able to get more than one nested layer working.

Just as in the demo, there are three top-level layers (About, Instructions, Licensing & Support) and nested layers under 'About' only. If you try to add another nested layer under another parent (like under 'Instructions'), the nested layers no longer collapse and expand as expected. Oddly, the first nested group will continue to work properly, just subsequent nested layers fail to work properly.

dvation on August 13, 2009 at 12:39 pm

Figured I'd also post a little workaround to getting multiple nested layers – it's not pretty, so if you have many layers this wouldn't be fun to code. Basically you need to create a new object for each additional nested layer which means adding something like this along with your other accordion objects (I just added a '1' at the end of every place that had the string 'nested':

var nested1Accordion=new TINY.accordion.slider("nested1Accordion");
nested1Accordion.init("nested1","h3",0,-1,"acc-selected");

Then, change your 2nd nested div layer from <ul class="acc" id="nested"> to <ul class="acc" id="nested1">

Then you need to have the right styles for #nested1, so in styles.css copy and paste every line that begins with #nested and edit it so it says #nested1 instead.

Works fine, quite a pain for someone like me who has lots of accordion layers.

dvation on August 13, 2009 at 12:49 pm

I wonder if anyone could tell me how to have more than one initially expanded section. I've tried a couple of things without any success. Thanks.

Thanks very much for providing this script, Michael.

Andrew on August 15, 2009 at 12:05 pm

I would like to know how to enlarge the center picture????
I am not programmer
please give me details

Thanks in advance

alain on August 17, 2009 at 1:35 pm

Firefox Flickering Issue

Hey guys I seem to be having an issue with the accordion flickering in Firefox but not in IE. It happens mostly with the Expand all and Collapse All features. I am thinking it must be my css which I have altered to create a custom box around the content. Can anyone help me figure this one out? Here is the link to the page:
http://www.thelocalchoice.state.va.us/sandbox/dhrm/customers/management.html

Paula on August 19, 2009 at 12:38 pm

I solved the issue using
<script type="text/javascript">
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>

Paula on August 19, 2009 at 2:42 pm

muito bacana Obrigada!

alessandra on August 21, 2009 at 11:04 am

Hi all,
The script is brilliant! Thank you!
Though, I do have one issue that's keeping me from implementing it … as the script conflicts with other scripts on the page.

On the first line of code in the style.css:
* {margin:0; padding:0; font:12px Verdana,Arial}, if I remove the first asterisk character "*", the rest of my page loads and works fine, but the accordion script is broken. If I put the asterisk character "*" back in, the accordion works fine, but the rest of the page is messed up.

Can someone tell me a workaround that removes or replaces this "*" asterisk from the first line of the style.css – and keep harmony on my page?

Sorry is this is a simple question, but what is this asterisk "*" used for anyway? Does it apply global characteristics?

Thank you in advance :)

Mitch on August 21, 2009 at 11:11 am

… Hey Paula … I looked at your example – the one you linked to here – to see how you used the script. I like what you've done.

Although, using the script in a Virgina State Government website is ok by the author, but clearly giving yourself TOTAL CREDIT "in writing" for this wonderful script, is bad manors and illegal, don't you think?

Mitch on August 21, 2009 at 2:04 pm

Does anybody know of an easy way to "auto" scroll through the items – and also loop back to the top to start over again when finished? Also would still allow for manual intervention. We are trying to use this as a featured content type thing. Any help would be greatly appreciated! Thanks.

Kristin on August 25, 2009 at 2:59 pm

very nice. thanks a lot

discount web design on August 28, 2009 at 4:38 am

Was anyone able to figure out how to have more than one instance of TinyAccordion on the same page ?

Thanks for your help guys.

Linda M

Linda on August 30, 2009 at 12:12 pm

Hey – Just wondering if there is a way to link to a specific <div> within the accordion? So depending on what link I click either the first, second or third div will be open.

Erik on August 31, 2009 at 11:57 am

@Paula, how did you implement the script for preventing the flickering other than putting it in the "head" section? Thanks

Diego on September 07, 2009 at 10:38 pm

Hi All
Just Great….
My humble contribution to this excellent script is following:
- Two instances in the same page (with the same logic can be more)
- All menus are nested
- All menus are closed in the opening.
- When you open a menu, others are closed automaically
- Omitted intentionally Collapse All and Expand All because the beauty
of this script is the opening and closing one by one

You can find a demo in my web site: http://www.farashatrade.com.
You can also downlod files from the same.

Your comments are welcomed.

Farasha on September 19, 2009 at 5:52 pm

Did anyone ever figure out the problem with IE and the font looking like sheeot? This would be perfect if so, but totally unusable otherwise.

Brian Temecula on September 24, 2009 at 2:03 am

Thanks a lot for the accordian. I was able to implement it as a menu for products page in my friends web page. With the help of php, I could open the previously selected menu level upon reload of the page.

Just in case u r interested, http://usartindia.com

YK Prakash

YK Prakash on September 25, 2009 at 9:55 am

Hi, I'm having a problem and looking for some help, please, if someone know the solution – HELP!!!! :-)
I want to change bg image of some nested headers to some other image. I've tried a lot of different variants but it still doesn't work… :-(
Please, HELP!!!!!!!

Denis on September 28, 2009 at 2:15 am

amazing! by default all tabs must be closed only after clicking it must open..

snick on October 01, 2009 at 3:37 am

Nice little work.
But the flashing at page loading is not quite a pleasant thing, especially for such a light weight page

zxie on October 02, 2009 at 11:17 pm

Very nice accordion script. I have trashed all of my others.

I am only having one problem with my implementation, which I worked around, but would like to know if there is a fix available or one in the works.

Problem: If the 3rd parameter (i.e., whether the panels should be expandable independently) of the object is set to "1" (i.e., expand independently), then "Expand All" will collapse the active content and expand everything else.

James on October 14, 2009 at 10:37 am

Is there a way to have a specific section open based on a link that's clicked from a different page?

audrey on October 29, 2009 at 11:43 am

I encountered a problem using this script in combination with Dreamweaver CS4 templates. When you make a repeat region in Dreamweaver the program adds extra html comments. After using the IE javascript debugger I found the problem was with the html comments.

The solution to fix this problem was editing line 12 of your script

Original line 12: if(v.nodeType!=3){
My version : if(v.nodeType!=3 && v.nodeType!=8){

This solved the problem and now I'm able to use the script with Dreamweaver templates.

Irwo on November 03, 2009 at 7:27 am

Great script mate! Really nice job!

I have managed to implement in two websites already. One question though How to make all of headers load, not closed but, open?

George K. on November 04, 2009 at 10:17 am

@ mathieu, on IE, I have a script error in script.js, "Object required", line 8, 9 or 10, it depends. You suggested to add "if (listElements==null){ return;}", but where in the script?
Note the script is functionning perfectly, only IE send an error message on load.
Thank you.

Stephane on November 12, 2009 at 5:28 am

very very nice, thank you

one thing that doesn't matter, the option "whether the panels should be expandable independently (optional)" had me think that 1, true and anything alike would make panels expand indepedently and 0, false would only let 1 acc-section at a time, which is the opposite of how it really is

dimitris on December 03, 2009 at 5:40 pm

This is really great! Any chance it could be tweaked to expand when hovered over instead of clicking?

Caroline on December 04, 2009 at 5:52 am

Hello, very nice script, thanks for sharing it!

I made some modifications to solve two problems:
1. In IE the text was losing antialiasing — just add "removeAttribute('filter') in the proper place;
2. Add an option to specifiy "fixed-height" items — it means that the height of each accordion item is recorded, and the maximum used instead of "auto"; this prevents the (ugly IMHO) moving of the page up and down as different-sized items are activated. This is somewhat more involved…

May I also suggest to not obfuscate the source like this, it is extremely difficult for someone to understand the code this way, plus it can be properly minimized using the right tools (like the YUI Compressor), I believe the proper way to distribute it is with the neccessary variable names and comments — people can decide to minify/pack it themselves if need be.

Where can I send the patched/improved version so you can incorporate it as well?

Best regards!

Mihnea-Costin Grigore on December 07, 2009 at 8:21 pm

Thank you for this! Amazing. I integrated it into my wordpress theme with 2 levels of categories with posts all collapsable. Think I might turn it into a plugin if you don't mind.

Paul on December 10, 2009 at 5:21 pm

sorry, I 'm still trying to make it works but all sublevels appear expanded..
does anybody know if it works with php generaterd lists???

Laura on December 11, 2009 at 11:18 am

Hey, great script. Here's my question: I dont want any nested menus…if I remove the HTML for the nested section, I get an error (line 9…) How can I modify the js to handle the missing nested items? Thanks

rollout on December 21, 2009 at 11:43 am

For all those experiencing slowdowns, you can speed up the accordion by finding this part of the script:

var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';

and change the d/5 part to d/1 or d/2.

Great script and looks fantastic. Thanks!

The Sandbox on January 04, 2010 at 3:35 pm

I am trying to use your tinyaccordion, I added a set of nested accordions to a main set of three accordions, and it is working in Safari and firefox but I am getting errors in IE but works after you close error windows. The errors point to the javascript at the bottom, something about TINY undefined. I have the bottom script setup like this to handle multiple nested accordions:
<script type="text/javascript">

var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);

var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",1,-1,"acc-selected");

var nestedAccordion2=new TINY.accordion.slider("nestedAccordion2");
nestedAccordion2.init("nested2","h3",1,-1,"acc-selected");

var nestedAccordion3=new TINY.accordion.slider("nestedAccordion3");
nestedAccordion3.init("nested3","h3",1,-1,"acc-selected");
</script>

I also have the css repeated with 2 and 3 added to them.
Thanks for all help.

Barry J on January 06, 2010 at 5:56 am

Thank you very much., first i had problem in using it on ie., but later found that i was missing the necessary
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
:)
Thank you once again.

Rishish on January 18, 2010 at 1:03 pm

Thanks for sharing with us!

Deepak kumar on January 20, 2010 at 1:12 am

Spent half the morning messing around with jquery accordion trying to figure out what files I needed – core, core ui, jquery, jquery accordion, jquery accordion ui, etc…

Got your script working on my page in less than 5 minutes – thanks!

BradleyT on February 02, 2010 at 11:47 am

how do i keep the state of the menu when navigating through pages ???
Fantastic code but with out the active state being kept

chris on February 03, 2010 at 9:38 am

Super, it works very fine. How can I add a nested-nested level ? Thankxxxxx

visulla on February 03, 2010 at 4:04 pm

First of all wonderful script. Took me a bit to work through it, but now i have a 12 bar menu with three levels of nested accordions. Its currently using my company database to provide a menu for around 6000 products.
The problem i am facing is that I need the menu to open on mouse over instead of click. I want click to send the user to the page that each menu item would represent. Should be an easy fix, but i can't figure out where to change the code to take it from click oriented to mouse over. Thanks Michael.

Alliance on February 23, 2010 at 2:12 pm

scratch that, figured it out. only had to change the onclick event.

will be sure to post link when the menu is finally live.

Alliance on February 23, 2010 at 2:19 pm

@Alliance– did you try this? I tried replacing onclick with onmouseout at line 10 and I get this weird error in IE7 after a while..

key on March 02, 2010 at 4:23 am

I would like to help me on the following:
- How can I set the background image of the parent level when it is active? The background image changed only for the active nested elements (not the parent elements).
- How can the nested levels collapse when I select another parent level (in order to see them collapsed when I return to their parent element again)?
Thank you in advance.

tsthanos on March 24, 2010 at 12:53 pm

Michel, thank you so much for your plugin. It took me a while to figure out how it works, may I suggest that you use comments for description of your code?
And I have a question. Suppose I want only active block to be expanded. I use <li <?php if ($thisPage == 'this page') echo 'class="current"'; ?> >this page</li>. I tried adding echo '<script type="text/javascript">accordion.pr(0)</script>;' but it does not seem to work. Can you or anyone suggest a solution? Thanks in advance!

Katja on April 02, 2010 at 4:17 am

one small issue i'm finding is that when you click on one tab and then click on another really quickly the first tab doesn't finish it's open/close animation. So the original tab is only half way open.

bobby on April 08, 2010 at 11:14 am

Is there a way to speed up the expanding/contracting time for this accordian? I barely know Javascript, so I really LOVE the scripts you create. They're wonderful!!!

Denise B on April 09, 2010 at 12:43 pm

Nevermind.. I read the rest of your blog and found where to speed up the timing.. Thanks again — wonderful script!!!

Denise B on April 09, 2010 at 12:50 pm

Micheal, first… thank you very much for the effort it took to make this script.
Earlier in this post there was a question if it was possible to make this accordion script horizontal? You said that you would work on it… I'm busy making a website for my wife and i need (for layout reasons) a horizontal accorion which closes when the next accordion is clicked. Can you tell me if this is possible?
Very thanks in advance!

Pieter on April 17, 2010 at 5:02 am

Hi,

Thanks for your great plugin.

I have put nested list under third parent list but it does not work(accordion effect). Can i have any guide on this?

Thanks

Ric Ryan on April 23, 2010 at 12:44 pm

How to make all the sections initially expanded y default?

Sanchow on May 04, 2010 at 11:48 am

I've been playing around with this script for a while now, changing it a bit to meet more with my employer's needs for a project I work on. I've added the ability to open levels on-hover (but only close on-click), as well as a way to turn off/on this extra bit of functionality. I also corrected a bug that keeps levels from fully openning/closing when another level is selected (more apparent with the onhover version – but quick clicking on the original version shows this too; or alter the open/close delays to allow you time to click and you can see how the one level will only partially open/close). I am working now on adding the ability (probably on the constructor and init) for system-wide and per-level delays. I really wish non-single character variables were used; its like reading and hacking old-school BASIC – egh! Anyhow – provided my employer is amiable to it (I don't think this will be a problem, but I have to check) – would you be interested in a copy of these changes?

Andrew L. Ayers on May 06, 2010 at 12:56 pm

Got delay mods in (per accordian), plus added an "open all" parameter (parameter 4 of init() controls this; currently 0-n controls which is open, -1 closes all – my change adds -2 for open all). This has been a fun little script to hack on, btw!

Andrew L. Ayers on May 06, 2010 at 1:34 pm

hey there!! i've been trying out the script and i do agree.. its pretty amazing. i read this whole thread and although a few people mentioned the "keeping the chose state active" issue, i didn't see how it's done. can anyonw help me please? thanks!
Mark

Mark Pereira on May 18, 2010 at 11:01 am

Amazing! Thank you for creating such a great script and sharing it here for all of us, Michael. Thanks to dvation, Barry J and Farasha for their tips, too.

teksfilm on May 20, 2010 at 5:36 am

Hello, I am getting an error in IE8. ['h' is null and not an object] line 13 script.js. This only happens in IE8 when compatibility mode is off on a drupal site. Works fine on a non-drupal site. Any help would be appreciated.

Rob Mal on May 25, 2010 at 9:47 am

Correction to previous error statement. A non-drupal site still gets the same error when using IE8 without compatibility mode; 'h' null or not an object, but the script works. On the drupal site I get the same error the menu's will not expand/contract. Sorry for the second explanation.

Rob Mal on May 25, 2010 at 10:01 am

awesome…fantastic my fren….thank alll

WILLY on May 29, 2010 at 4:26 am

thanks for this. been looking for nested accordian. and the size of the code is really small. thanks again

piks on June 08, 2010 at 11:13 pm

Great script but i'm having some problems. I set the accordian heading font colour to black but on clicking a heading or nested box the heading reverts to white which is difficult to read against the pale background.

Any suggestions??

phil k on June 24, 2010 at 4:24 am

Hello, nice accordion script. For some reason I cannot make multiple nested accordions, any help will be greatly appreciated. Thanks

mario on June 29, 2010 at 12:43 pm

Hi

I was wondering….is it possible to remove the fade effects on your accordion script? and if so how could this be done?

Cheers,
DC

DC on July 13, 2010 at 2:36 am

Hi,

I love your script ! Only one little detail i'm having trouble with. Is their a way of having the opened tabs close once we click to expand another tab. I'm sure this can be done fairly easily but not quite sure where to start.

Thanks in advance, cheers

Phillip on July 25, 2010 at 2:37 pm

Nevermind my comment, I found the fix.

Changed the 0 for a -1 in the following line inside the slider function:
onclick=new Function(this.n+'.pr(-1,'+s+')');

Phillip on July 25, 2010 at 2:43 pm

I having a problem with the script not working (everything stays expanded) in IE8 with compatibility mode turned off and in Chrome. Has anyone else run into this problem?

James on July 29, 2010 at 8:32 am

Recently, I began getting the error below in IE8, Chrome, and Safari with compatibility mode turned off. When compatibility mode is turned on it works fine. Previously (for months) it worked without problem and now without any code change I began getting this error. I have checked and rechecked and rechecked the js, css, and html comparing it against your demo (which works in all browsers) and cannot find the problem. Has anyone experienced this problem?

Message: 'h' is null or not an object
Line: 13
Char: 77
Code: 0

Also, is there a limit to the number of accordions that can be created? I have 14 (8 parents and 6 nested) and each are created with a unique id.

James on July 29, 2010 at 11:11 pm

I found the problem with IE8 comp-off, Firefox, and Chrome not initializing the accordion, as described in the my previous posts (James on July 29, 2010).

If you have an accordion ul that has multiple li elements (which it should) and you comment out, one or more of the li elements, to temporarily hide it/them, none of the accordions on the page will initialize.

James on July 30, 2010 at 2:18 pm

I having problems getting it to work on chrome

yinka on August 03, 2010 at 11:28 am

Hi there Leigeber,

Great script. How could I open the accordion programmatically. In other words, if I'm coming from another page and I want a certain section of the accordion to open, how can I make that happen? Any info you could provide will be greatly appreciated.

Thanks…mg

Mario on August 04, 2010 at 2:00 pm

We are also one the best Laptops Repair Specialist in London,Our services are Laptops services ,Laptop Repair,Laptop software Repair,Laptop Data Recovery,Data Retrieval,Harddrive repair london

Balaji on August 26, 2010 at 2:35 am

Excellent script, Thanks for share, very smooth transition of boxes.

Craig on August 27, 2010 at 3:06 am
Comments are closed at this time.