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.
February 24, 2013
February 3, 2013
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!
Thanks, it’s the best javascript accordion I’ve seen so far. easy to use, nice work.
That’s one great little accordion menu!
“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!
This is amazing. How about multi-level support for horizontal accordion script?
Thank you.
Bravo !
Your components are realy golden stones for web GUI developpers.
I can’t imagine what you will propose in 2010 …
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?
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
@Eugene – I will add it to the to-do list.
@Peter – I will look into the issue.
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.
I apologize. It appears to work with a small bit of tweaking. Thanks so much!
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!
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!
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?
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
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
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?
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.
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!
I like it! Looks great but more importantly, its easy to implement and sooo lightweight!
Great work!
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!
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.
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.
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.
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!
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.
This is amazing. How about multi-level support for horizontal accordion script?
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 
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
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
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…
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!!!
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.
@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
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: this is not possible, check Michael’s post on 29 Mar 2009 at 1:27 pm.
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.
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:
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.
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”?
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.)
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?
@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.
@Adam, please read Michael on 29 Mar 2009 at 1:27 pm
@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?
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!
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!
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
@mrSunnyZ: can you please share with us how did you handle that? I’m looking for the same solution…
WOW! I’m a superstar at my office, everyone loves this! Thank you So much!
Thanks for sharing this Accordion to us…its light weight and easy to integrate..really stunning work
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.
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!
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
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.
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);
@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?
ok i just put this in the uncompressed scripts if (listElements==null){ return;}
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.
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!
Look, I've been testing this script on Safari 1.3.2, (OsX 10.3.9), it works but submenu expand itself very slowly.
I'm completly stunned by all those genious scripts on your website.
Many great thanks to you!!!
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">
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!
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.
That was stupid. I changed the /5 to /2 and I like it now.
@ 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?
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?
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.
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 ?
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
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
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.
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>
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
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…..
Does anybody know how i can manipulate the active level-headline in the CSS?
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!
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!
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))
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.
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.
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.
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.
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.
I would like to know how to enlarge the center picture????
I am not programmer
please give me details
Thanks in advance
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
I solved the issue using
<script type="text/javascript">
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>
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
… 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?
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.
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
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.
@Paula, how did you implement the script for preventing the flickering other than putting it in the "head" section? Thanks
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.
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.
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
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!!!!!!!
amazing! by default all tabs must be closed only after clicking it must open..
Nice little work.
But the flashing at page loading is not quite a pleasant thing, especially for such a light weight page
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.
Is there a way to have a specific section open based on a link that's clicked from a different page?
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.
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?
@ 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.
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
This is really great! Any chance it could be tweaked to expand when hovered over instead of clicking?
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!
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.
sorry, I 'm still trying to make it works but all sublevels appear expanded..
does anybody know if it works with php generaterd lists???
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
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!
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.
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.
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!
how do i keep the state of the menu when navigating through pages ???
Fantastic code but with out the active state being kept
Super, it works very fine. How can I add a nested-nested level ? Thankxxxxx
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.
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– did you try this? I tried replacing onclick with onmouseout at line 10 and I get this weird error in IE7 after a while..
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.
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!
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.
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!!!
Nevermind.. I read the rest of your blog and found where to speed up the timing.. Thanks again — wonderful script!!!
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!
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
How to make all the sections initially expanded y default?
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?
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!
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
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.
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.
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.
awesome…fantastic my fren….thank alll
thanks for this. been looking for nested accordian. and the size of the code is really small. thanks again
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??
Hello, nice accordion script. For some reason I cannot make multiple nested accordions, any help will be greatly appreciated. Thanks
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
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
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+')');
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?
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.
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.
I having problems getting it to work on chrome
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
How do make sure font type in panel 1 and all other panels are the same. If you look closely in the demo the font type in panel 1 and the rest of the panel are different when view in IE. In Firefox, font in all panels are the same.
Writes "Have no XML file "(((shit
Did you ever figure this out?
Actually, I just figured it out. For anyone else having this issues, my problem was I had the script tags in the head. I moved them to the bottom just before the closing of the body tag (as is shown on the index.html page example) and it worked.
Afternoon
Nice script, but how do I do multiple nested accordions ?
Iain
Great script. I have found one issue however. It is in working with IE. I found that when I start with a section closed then open a section the bolded fonts do not generate correctly. They are blurry/distorted.
I just started this web project, but have put up a sample as to how it is looking at jcwenzeldesign.com/clients/rm/. If anyone knows how to fix this issue I would be very grateful for any ideas.
Thank you.
This is a wonderful script, I want to use it on a new website for a customer – the only problem I have is this: When I try to generate multiple nested accordions, I never get a good result – either the accordion doesn't work at all or it is all expanded from the start, unable to shrink back again…
Any help or hint would be very much appreciated.
Thanks in advance.
Thomas
To al lof your having the problem of using multiple nested accordions, you must call the javascript again, with a new ID for each nested element. On your second nested section, instead of making the ID = nested, name it 'nested2', then at the bottom where you call your JS, add
var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested2","h3",1,-1,"acc-selected");
Nevermind, that only appears to work. When to try to click each nested, only the last set of nested items works. Wish the author would chime in on this…
Hi James
If you read the documentation in the forum as well as the post above you will see what he is saying is correct. I am not even a programmer and I got multiple nesting working no problems.
Iain
Great script! ^_^
Greetings, is a very good script and it worked wonderfully but I may be helping to make it appear closed at the beginning? Now when you open the page opens the first tab but I want to go all closed as I would? help me?
Try passing a -1 as the fourth parameter.
Thanks James, your comment helped me a lot.
Css file should be modified also to get the right view of multiple nested accordions
Thank you for this beautiful script. One question: Is there any way to constrain the height of the component so it fits in a limited area?
How to make that it is primary at an accordion all bands have been contracted?
Hi – I am having trouble making multiple nesting working with this great script. Anyone got any ideas how to do this? Or is it a case that you have to create a new id and set of css for each nest?
hello!
I have a problem with the nested panels. I added a new one and I change the id. I have a problem on opening the nested panels of the firts panel when I click the first nested then the second nested panel opens and the firts stays closed…
I would also like to know why when the accordion opens the window doesn't appear the common scroll bar on the right on it so the visitor can scroll..
It looks like you got this issue resolved – would you mind sharing how? I'm still having the blurry bolded text in IE.
Did you ever figure out how to eliminate this error?
hello!
I have a problem with the nested panels. I added a new one and I change the id. I have a problem on opening the nested panels of the firts panel when I click the first nested then the second nested panel opens and the firts stays closed…
I would also like to know why when the accordion opens the window doesn't appear the common scroll bar on the right on it so the visitor can scroll..
Where is the documentation in the forum?
Thank you!
Make sure you are passing the unique instance ID to the respective objects…
var accordion=new TINY.accordion.slider('accordion');
var accordion2=new TINY.accordion.slider('accordion2');
Hello
thanks for the reply it'seems to be ok now…
But the problem with the scroll bar on the window when the accordion is expanding exists..it doesn't appear so the user can scroll…I use asp.net for that site and I have put it in my master page…it also moves my text in my pages up and down when I click the menu on the left…
Thanks again
Regards
Hi.
Sorry, I posted about "Animated JavaScript Accordion V2" here.
I'm trying to use "Animated JavaScript Accordion V2" on my HP. It seems fine with Chrome, Safari, FF and IE7.
However, with IE8, it works differently from other browsers. You can see this problem with even accordion1 of the demo (http://sandbox.scriptiny.com/accordion/index.html) .
When you click accordion1 several times, .accordion dt { margin-top:5px } disappears.
Does anybody have any idea how to fix this ?
Hi!
I'm having problems using nested accordions inside a .NET 'Update Panel'.
Do anyone have the same problem?Any solution??
Thank you in advance.
Best regards. V
I fix the problem with the text..but the issue with the scroll bars is still there …i try the overflow in my css in boby section… A scrollbar is appear but when i srcoll down my page stays in the same level!
thank you
Do you have a link? Are you initializing the script after the panel is loaded?
Thanks for the report, will get this resolved in the next day or two.
Contact me at the bottom of this page with a link.
hi how do you start the accordian with no elements collapsed (ie all closed)
Try passing -1 or false for the next to last parameter.
Just throwing this out there for other users. I had an IE issue where whenever I moused over the nested panels the bottom of the acc section div would drop down under the border by about 15 pixels. There was a CSS rule for the nested tags that has a margin-bottom: 15px that was causing this. I went ahead and removed that rule and put a div under the nested ul and made a margin-bottom: 15px class rule for that tag, it holds additional content should I need it. But adding a padding-bottom rule to the acc section div would probably have taken care of it as well.
I'm not really sure why it behaved this way, it probably had to do with the structure of my page and is an issue I created and not one built into the script. But in case anyone gets a similar problem, that is probably the culprit.
hello leigeber,
I cannot post a link I just work my new version of site topically. I try the overflow value in several parts in my master page… And either a vertical scroll bar appears on the left of the menu or when I put it in the boby attribute the scroll bar appears on the right of the window but it doesn't seem to do nothing when the the menu expands or even i have text that overflows the default height..
May I post you some code?
Great script, works beautifully, quick question though, well maybe. I have some users that were wondering if there is a way to close child sections within an accordion when the nested accordion is closed? I got an accordion for Training, under it I use line items for the questions and they drop down with an answer for the question. If I click the nested accordion to bring up the Training accordion and then click the Training accordion again the last expanded question is still open. I have been asked to have it closed.
I appreciate the script, but trying to figure out what everything does in there is sort of a nightmare to a javascript noob like me
I would think that reinitializing the accordion each time it closes would be a solution to this issue, but even though that might work it seems like a bad way to accomplish what I'm trying to do. I was hoping for a little inspiration from anyone who has conquered this issue themselves.
Thanks for the script, it works nice. Just a single suggestion which I think will be useful not only for me.
Could you add a feature disallowin users to have all tabs closed?
For example if you click on the already open tab then it it's not getting closed. In short, a feature that fixes the size of the accordion and doesn't allow to close the opened tab, unless you toggle another one.
What do you think?
This should be really helpful. The jQuery accordions have this feature at least
p.s. The script itself in a good one.
I will include this feature in the next release.
I´m using this wonderfull code, with wordpress+ ctabs plugin. I want to have a set of accordions in each tab, but can't seem to make the one on the second tab work at all. Here's the link in case you can take a look http://tinyurl.com/3np35ym.
Here's an example of what I want, I found this searching for a solution, but I definitely rather use your script! http://testing.bellamys.org/
Hello. Thank you for your reply.
I hope you are still working on my problem and solve it soon.
Thanks again!
Very cool! I have implemented this on my site. I do have a question tho, there seems to be some extra space below it on my page. How can I remove this? Thanks!
Hello, leigeber,
I am very pleased with the look and feel of your accordion script.
However, I have found an issue that shows up in the following scenario:
in this web page http://yaml.websteps4you.de/arbeitsbeispiele.htm
there are several nested structures implemented, where the user will be able to look at (among other) PDF files.
These PDF files are perfectly displayed in the Firefox browser as well as in Opera, when the nested elements are opened, but:
in the current versions of the Internet Explorer we have a complete chaos:
When one of the nested elements is clicked, in addition to the chosen element, another PDF (which is loaded in the background) also shows up and flickers. See the example here: http://yaml.websteps4you.de/arbeitsbeispiele.htm
I am quite sure that I have built up a correct structure, as well as I am sure that the nested elements are initialized correctly. I have tested both alternatives:
implementing via <embed> as well as via <object> , but there is always this strange result in the IE.
At closing the nested elements, the problem with the flickering PDF files (the ones that actually are not chosen for being displayed) pops up again.
I cannot find any hint why the accordion script might not fully work with embedded PDF's in the Internet Explorer, so your help will be most appreciated.
Thanks in advance,
Norbert
Love it! Thank you!
I haven't studied the javascript yet, but how hard would it be to allow deeper nesting? In theory looping for infinite descendants, but in practicality, one or two more descendants? It's not a huge deal as 2-3 levels will fit my needs for now, but as I'm using this for a client, I'd like to make it more robust and flexible in case he adds further descendants. I guess I'm also a bit of a perfectionist, and might make this into a wordpress plugin (crediting you of course), and beginners on wordpress do their best to break everything they touch. *rolls eyes*
Thanks again for your work and making it public! Cheers!
Sure, you can nest any number of levels.
Haha, of course! Just forgot to create a new object. Mission accomplished! Thanks!
I found that I could not make html comments anywhere in the html part (b/n <ul> & </ul>) Not a big deal, you just might want to mention it to save others the trouble.
Thanks
I'm adapting this to wordpress for a taxonomy menu (categories), if anyone would like it, give me a shoutout. My site isn't up at the moment, so it's (david[at]origamifolder.com)
It's basically a php version with some wordpress functions. If anyone would like a php version to make it dynamic, I could probably pull that together in a day or two. Let me know if you'd like that.
One of these days when I finish all the above, I'll make everything available. Cheers!
First off thanks for the scripts, they are amazing.
I think I'm trying to resolve the same thing as
@facebook-664909779:disqus
posted previously. I have nested accordions that I would like to close when the user either closes the parent accordion completely, or closes if the user clicks on another of the drop down in the parent accordion.
At the moment the nested accordions all remain open if I open and close their parent. I've tried playing around with it but have only just started learning javascript and am not having any luck. Any help would be greatly appreciated, been trying to figure this out all night with no luck!
Hello!, I need to use the accordion twice in te same page. How can I do it?. Thanks and sorry for my english!
Sorry…, I mean two different accordions in te same page. Thank you!!!
First of all — thanks SO much for this cool script!
Question for you — Everything is working great for me but for some reason my second set of nested panels are open all the time and don't even close when clicked on. I'm confused and can't find my mistake.
http://www.spatialgraphics.com/custom-cover.htm
Hi, I'm a complete novice but have been trying to update my website with some articles to increase the SERPS. At the moment I have small snippets of the articles on my homepage, which have links through to the main article page. Curently they are in a scrolling div box (how simple was that), but I'd like to put them in an accordion script as it looks and interacts way better.
The problem is, I have no idea where to put the code etc…I'm using Volusion who aren't a great deal of help unless you want to pay them money for everything (so much for the OOTWS!)
Could anybody help me please as to where I need to put the style.css, script.js etc
I'd really appreciate it.
Limegreen
Hi great script – though there seems to be an issue with the font changing when you first download page and then when you keep refreshing the headers the font is different. Does anybody know of an easy fix for this – Iam using IE8 ! Thanks
Sorry, meant to add that font of subcontent changes – seems to be a problem in IE not FF. If anybody has any idead I would be very grateful… thanks…
Great script. How would I get a particular section of the accordion to open if I linked to that section on another page through a named anchor. Need to know what values to pass in the link to get a specific section of the accordion (default all collapsed) to open if an anchor link is clicked from another page.
You should add the following to Line14:Col98, to handle the case where the user decides to collapse all by default:
c.style.opacity=0;
Also, it may help to mention that content inside of the <li> elements (not including the section header) needs to be inside of a <div>.
Those tags after the period shouldn't be there, lol.
Hi i am new to web design, i am using dreamweaver and i would like to put your accordion scipt into my page, is there a step by step instructions on where the script is to be put?
Hey Leigeber
Your accordion is great, I've been playing with it for a while now, looks fantastic. Can't thank you enough.
It was working like a charm until I put a background on my page. Now it is very jittery as it slides.
I tried changing the "speed" from d/5 to d/1, but then it lost a lot of the sophistication it has.
Is there a way to make it independent from the background or something in order to remove the stilted slide?
My page is here http://stuartchater.info/experience
Thanks, Stuart
Hi,
I've had a scan through all of the posts here, but I haven't been able to find an answer to my question. Which is, if I want to have all of the tabs open on page load how do I accomplish this. I have played around with the "acc",h3,0,0 parameters but can only get one to open on page load.
Any help would be gratefully appreciated.
Derrick
Great little script! However I keep getting error in IE – 'c.style' is null or not an object. Anyone else having this or know of a fix?
Sorry forgot to mention, not sure if it is relevant but I only have one level of dropdown inside the accordion (there is no 2nd accordion within an accordion!)
I want to use Accordion on my website but now I a getting problems to integrate it with Perl script. is complaining about dollar sign on the java Script.
h is undefined
init()accordion.js (line 13)t = "acc"e = "h3"m = 0o = 0k = undefinedlogonspecials.pl()logonspecials.pl (line 1541)
this.a[s]={}; this.a[s].h=h=T$$(e,…new Function(this.n+'.pr(0,'+s+')');
Hi, there is a way to change "<h3>" with "<a>"???
Hi, there is a way to change "h3 tag" with "a tag"???
Yeah same question actually. It seems to work using "id's" which means i can only place one. Is it possible to attach the event handlers to the ".acc" class?
Hello there! Fabulous script, one question: do you set the first level of the accordion to automatically collapse when selecting another on the same level? (similar to that of your nested level on the demo!)
Cheers,
Dave (http://www.acanthus-holden.co.uk/projects/commercial/1/project.html being the problem! On clicking on the other index items they fly off the page!)
dont know if you already solved this. but just define #acc a in your stylesheet and exchange h3 with a in the script at the bottom of you html-file.
How would be the best way to do this if I wanted to have multiple accordions on one page? Do I need to make a new var for each of them or is there a way to assign multiple ID's to one var?
This is a great script, replaced a mess of scriptaculous code I had.
I'm only having a small issue with hover states, and general effect degradation. In IE 8, after clicking through a few tabs, I can occasionally see some dragging happening, and the effect becomes a bit sluggish.
Also in IE8- The hover states randomly stop working, and I have to move my cursor far to the left, and then inside the accordion again to get it to hover an element.
These are minor – just wondering if anybody else is experiencing this, or if it is just me. Thanks for the great script.
http://www.alaskadenalitours.com/websptest
Hi there, Great script. Was wondering if there was any way to change the width of the accordion including the "buttons"?
Cheers
Just change the width declarations in the css.
I have a question about the script. I would like to automatically initialize each accordion but unfortunately it does not effects. This is my code from the initialize:
<script type="text/javascript"> function initialize(){ var allUL=document.getElementsByTagName('ul'); for (var i=0;i<allUL.length;i++){ var ul=allUL[i]; var accordionName='accordion'+ul.id; accordionName=new TINY.accordion.slider(accordionName); accordionName.init(ul.id,'h3',0,0); } }initialize();</script>Anyone can help me? Sorry, my english is not good.
here again my code
here again my code
Is there any way to have multiple section open on page load?
(Not my preference, but must obey the client!
Is there any way to have multiple sections open on page load?
(Not my preference, but have to try to keep the client happy.)
Thank u for posting.
Firstly, thank you for this great script. In addition, when we need to change the dimensions we have change more than one values (such as width) of wrappers and this can be coused to confusing sometimes. So i've played with css and i'am using like in attached picture, As you can see #nested .acc-content border will be "inset" otherwise border will be overflowed from the container. After that, you'll only need to change #acc's width then all other inner parts will be adjusted related to it.
Tested with (Win7 x64/Firefox 7 – IE7/8/9 – Chrome 14 – Opera 11 – Safari 5.1)
I'am sorry but #nested .acc-content should be : border:1px inset #9ac1c9; i mean you should delete "solid" and put "inset" to there.
Amazing, light and beautiful…. good job Michael
Hey, Love the accordian by the way. Really easy to use and customize. I have it implimented on this page:
http://fyrware.net/freebies.php
However, it is not expanding the sections in Chrome. It does it when I display the local file, but not the actual online file. It expands in FF and even IE just fine. Is there something I am doing wrong, or is there something you can help me with?
Here is my code:
http://pastebin.com/07dnKB4w
Thanks!
Nick Dugger
hi scriptiny, thanks for your script, it's very useful, i use it for my website project
Anyone know how to initially open the 2nd level of the menu (nested) ?
i've figure out how to open the first level on initialization but not 2nd
i need to know this too mario also requested help on this
cna u respond this pls needed urgently..
opass me the code will u?
i want to know this too many users includin g jonathan mario and me re asking for this deeplinking into tabs and so that they expand as requested.
i need the deep linking feature urgently here is some code that worked for UI accordion in http://www.mail-archive.com/jquery-en@googlegroups.com/msg59993.html
$(document).scrollTop(getRealTop(accordian));
function getRealTop(el){
yPos = document.getElementById(el).offsetTop;
tempEl = document.getElementById(el).offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
can you make it work so if i have a link saying open flower section i get redirected to where my accordion is and that section is expanded?
cheers.
Is there a way to change the background of the h3 tag when the accordion item is open?
If you're getting this error, make sure your markup is valid (a missing li tag can trigger this).
Get you real identity at
http://www.webbience.com/id_cards.html
Thank you. Can you insert images in each section? Im trying but they are not showing
You are an idiot!
There seems to be a slight race conditions if you fire the events too quickly multiple tabs can be left in a selected state and closed so they won't open again. It comes about because the "clearInterval" call can be triggered before a tab has finished opening/closing which leaves it in an unstable state.
Normally this would not be a problem as you can't do this readily by clicking on the headers… However I attached the opening and closing of the tabs to a "mouseover" event and the problem became apparent. I fixed it by moving the clearInterval(c.t) line from the "pr" function to the start of the "su" function.Not 100% sure why this fixed it so it might not actually be a fix, it might only be reducing the chance of the condition arising.
Does anyone have my same problem?
I'm adding an image in the #acc .acc-content div. I'm putting the image within another div, for special effects (you know: shadow, raised effects, and so on), and this div containing the image has to be floating and must have position: relative.
Everything works fine in latest chrome and firefox, but I'm having problems with IE6 (I'll try more recent versions later on, but I currently have this one available and the site must works in IE6 anyway). In IE6 the div with the image remains visible when the section is closed. It seems to be a known bug of IE: a relatively positioned element (my div containing the image) contained ina div with overflow: hidden (the #acc .acc-section div), remains visible. And a known solution is to apply position: relative to the #acc .acc-section div. At least, it is my understanding from some googling I've been doing today.
Still, this solves that issue but adds another one: the image is hidden when the section is closed, but when I open the section the image remains visible only for a fraction of a second, then disappears, leaving a hole as its placeholder.
Any suggestion? What am I doing wrong? Thanks, people.
Never mind: solved it. I modified the script so as it only handles the div with a specific class (.acc-section), thus ignoring its internal divs. Morevover, the modified script applies position: relative or static to it depending on the status of the section (closed or open), to avoid that the image disappears.
Well, it might be not elegant at all, especially because I'm a bungler at javascript, but in the end it works perfectly.
Great script! Did anyone modify it to toggle the Expand all | Collapse all links? Would be nice to have only one link..
I tried to insert a second level in each main category without any result : this script is ok for the first category but it displayed other sub-categories as expand.
Which is the way to have this kind of script ok for a list like :
- cat1
*sub-cat11
*sub-cat12
*sub-cat13
- cat2
*sub-cat21
*sub-cat22
*sub-cat23
Thanks for help !
yes, just add the css class h3.selected
I have the same problem, would love to know how to create several sub-categories within different categories (same as Trashou). If you get an answer please email me at mrgmccartney@gmail.com, Ta.
Only getting 4 levels to work with the sub categories, any level past that it opens the entire section, is there something in the script that is holding that back?
I'm getting the same issue as Trashou – "I tried to insert a second level in each main category without any
result : this script is ok for the first category but it displayed other
sub-categories as expand." – Anyone had a fix for this? I've tried changing a few things in the code (section labels), but it's just not working. Thoughts?
I seem to get this error and I dont understand why?
Uncaught TypeError: Object #<Comment> has no method 'getElementsByTagName'T$$script.js:4slider.initscript.js:13element.effect.times
I am trying to populate the list using jQuery jQuery("#installersList").each(function (i) {
i = i+1;
jQuery(this).prepend(oneInstaller);
jQuery(this).prepend(oneInstaller);
});
parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("installersList", "h3", 1, -1);
I put the initialization code in a jQuery document ready block. The appearance of the accordion was correct but it would not expand or collapse. When I moved the code out of the DR block, everything was fine.
FYI.
This is a nice gizmo, Michael.
Sorry 4 disturbing you guys
Actually I need to add this accordion in my google sites. but it does not work. I am new to javascript, can anyone help me???
I am having the same issue. I have some 2 levels but 10 individual sections with lots of data in them. In IE 8 it is SUPER SLOW to the rediculous level. But in all other browsers its fine. I have adjusted the speed interval and tried all sorts of other things to try and correct it to no avail.
demo and download off??
Great code, thanks for sharing it.
Can someone help me figure out how to modify it so that the sections dont auto-close. I need to have multiple sections open at the same time.
that didn't collapse all by default for me.
Thank you for this great script.
<code>
var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",0,$ex);
</code>
I want to change automatically the value of $ex (which is the number of the <h3><acc-section> as i understand).
How can i integrate a variable $ex?
Thank you for your help
Christophe
Hi, great script.
I'm having an issue with Safari. My accordion is at the top of the page (z-index) but some buttons (with rollover action) that are precisely under this z-index are off. I understand that this is because the level, but in all other browsers works fine.
Any ideas?