Accordion Script With Multi-Level Support

Javascript 278 responses so far

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.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Michael (see all)

  • http://macaoidh.name conor

    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!

  • http://www.snoupix.com/ Snoupix

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

  • http://www.churchwebsitepro.com Church Website Design

    That’s one great little accordion menu!

  • http://www.onlinebooktips.com Liza

    “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!

  • Pingback: Top Gossips » Blog Archive » Multi-Level Accordion Script: TinyAccordion

  • Eugene

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

  • Denis

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

  • Pingback: Multi-Level Accordion Script - TinyAccordion

  • http://www.interapps.nl Peter Schotman

    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?

  • Pingback: Multi-Level Accordion Script: TinyAccordion - Graficznie

  • Pingback: Weekly Links | Shaun Preston

  • Pingback: Feed Reader (Beta) » Multi-Level Accordion Script: TinyAccordion

  • Jani

    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 :-)

  • Pingback: Javascript Accordion With Multi-Level Support - Tiny Accordion | Greepit.com | Open Source Resources for Designers & Developers

  • http://www.leigeber.com Michael

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

    @Peter – I will look into the issue.

  • Derek

    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

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

  • http://sanbor.name Sanbor

    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!

  • Alex

    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!

  • http://chrismarsden.com Chris Marsden

    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?

  • http://www.dekookclub.net/rp/menu1/m1.html Ronald

    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

  • Hung Tran

    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

  • James

    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?

  • Danolo

    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.

  • BSteck

    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!

  • http://GoodingsMedia.com Goodings Media

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

    Great work!

  • Tim

    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!

  • Pingback: thinkuser.in » Blog Archive » Accordion

  • nishit

    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.

  • Deb Fahey

    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.

  • http://www.leigeber.com Michael

    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.

  • http://www.desigerkirklove.com Kirk

    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!

  • anuja

    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.

  • Rabindra singh

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

  • Irka

    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 ;)

  • http://None Jhonny

    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

  • Rekcor

    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

    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…

  • Pingback: Webmasterkit.info » Tiny Accordion Script

  • Kathy

    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!!!

  • http://www.shopdenas.com John

    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.

  • Rekcor

    @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

  • Albert

    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?

  • Rekcor

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

  • Christian

    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.

  • Stagecoach

    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?

  • Christian

    @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.

  • Stagecoach

    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”?

  • mataroh

    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.)

  • Adam

    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?

  • Rekcor

    @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

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

  • Rejcir

    @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?

  • http://www.mrsunnyz.com mrSunnyZ

    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!

  • http://www.mrsunnyz.com mrSunnyZ

    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!

  • http://www.eminli.net Ugur

    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

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

  • http://internal Abicus

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

  • Pingback: Multi-Level Accordion Script | Themeflash : The Better Resources For All Your Web Needs

  • http://bestpractices.0fees.net Faizan

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

  • Michael Thomas

    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.

  • samm

    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!

  • Amihafreak

    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 ;-)

  • KristjanJo

    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

    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);

    :)

  • mathieu

    @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

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

  • CK

    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.

  • Pingback: Animated JavaScript Accordion V2 | thisispopup.com

  • Giovanni

    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!

  • http://www.davidevalerio.it/blog Davide

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

  • Mischa

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

  • Pingback: 10 Awesome free accordion scripts and tutorials « Paul Rostorp’s Blog

  • Sam

    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">

  • codyde

    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!

  • Sam

    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

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

  • http://www.aida-global.com mshetler

    @ 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?

  • codyde

    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?

  • Ken

    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.

  • Pingback: 20 Of My Favorite Javascript Codes and Blogs — Resources Weekly

  • http://www.cssproperty.com Atul

    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 ?

  • David

    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

  • http://www.vitorneves.com/ Vitor

    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

  • diego hurtado

    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.

  • Mike

    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>

  • Xavier

    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

  • Marie

    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…..

  • Christian

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

  • Clive

    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!

  • erin

    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!

  • Jenna

    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

    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.

  • MH

    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.

  • dvation

    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

    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.

  • Pingback: Animated JavaScript Accordion V2 | Web Design GroundBreak

  • Andrew

    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.

  • http://www.bluedream.be alain

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

    Thanks in advance

  • Paula

    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

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

  • Mitch

    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

    … 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?

  • Kristin

    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.

  • Linda

    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

  • http://webroot.com Erik

    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.

  • Diego

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

  • http://www.farashatrade.com Farasha

    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.

  • Brian Temecula

    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.

  • http://usartindia.com YK Prakash

    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

  • Denis

    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!!!!!!!

  • http://www.snicktech.com snick

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

  • zxie

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

  • James

    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.

  • audrey

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

  • http://www.irwo.nl Irwo

    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.

  • George K.

    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?

  • http://www.aloan.ch Stephane

    @ 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.

  • dimitris

    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

  • Caroline

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

  • Mihnea-Costin Grigore

    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!

  • Paul

    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.

  • http://www.web-magazine.it Laura

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

  • Pingback: Lightweight JavaScript Accordion with CSS - Web Development Blog

  • rollout

    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

  • http://enterthesandbox.com The Sandbox

    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!

  • http://www.jabstudio.com/hock/reviews.html Barry J

    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.

  • Rishish

    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"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    :)
    Thank you once again.

  • BradleyT

    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!

  • chris

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

  • visulla

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

  • http://www.allainceplastics.com Alliance

    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.

  • http://www.allianceplastics.com Alliance

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

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

  • key

    @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..

  • Pingback: Un script muy pequeño para crear acordeones | Strategist en Español

  • tsthanos

    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.

  • Katja

    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!

  • bobby

    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.

  • Denise B

    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

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

  • http://www.theblackdiv.com Pieter

    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!

  • Ric Ryan

    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

  • Sanchow

    How to make all the sections initially expanded y default?

  • http://www.inexo.com/ Andrew L. Ayers

    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?

  • http://www.inexo.com/ Andrew L. Ayers

    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!

  • Pingback: 多级手风琴脚本 – TINYACCORDION

  • Mark Pereira

    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

  • teksfilm

    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.

  • Pingback: TinyAccordion开源项目 - Ajax代码大全 - Java开源项目 - Ajax代码accordion相关 - Java免费软件 - TinyAccordion - 开源网

  • Rob Mal

    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

    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.

  • WILLY

    awesome…fantastic my fren….thank alll

  • http://funny-video-compilation.blogspot.com/ piks

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

  • phil k

    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??

  • http://www.ledtronics.com mario

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

  • DC

    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

  • Phillip

    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

    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+')');

  • James

    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

    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

    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.

  • http://www.spiralteck.com yinka

    I having problems getting it to work on chrome

  • Mario

    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

  • Kimteng

    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.

  • Max

    Writes "Have no XML file "(((shit

  • lornilla

    Did you ever figure this out?

  • lornilla

    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.

  • Ihmunro

    Afternoon

    Nice script, but how do I do multiple nested accordions ?

    Iain

  • http://jcwenzeldesign.com jcwenzeldesign

    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.

  • http://demo.i-nterface.at/oefv Thomas

    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

  • Pingback: Frank's Blog » :: JS :: tinyAccordion

  • James

    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");

  • James

    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…

  • http://www.facebook.com/people/Iain-Munro/706873345 Iain Munro

    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

  • Joelbb01

    Great script! ^_^

  • Leoncenteno

    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?

  • Anonymous

    Try passing a -1 as the fourth parameter.

  • Nina

    Thanks James, your comment helped me a lot.
    Css file should be modified also to get the right view of multiple nested accordions :)

  • Anonymous

    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?

  • http://twitter.com/Drug_VinniPuha maksimus

    How to make that it is primary at an accordion all bands have been contracted?

  • Rob S.

    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?

  • Mlykov

    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..

  • CARD

    It looks like you got this issue resolved – would you mind sharing how? I'm still having the blurry bolded text in IE.

  • margo

    Did you ever figure out how to eliminate this error?

  • mlykov

    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!

  • Anonymous

    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');

  • mlykov

    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

  • Occheapi

    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 ?

  • OrdonezV

    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

  • mlykov

    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

  • Anonymous

    Do you have a link? Are you initializing the script after the panel is loaded?

  • Anonymous

    Thanks for the report, will get this resolved in the next day or two.

  • Anonymous

    Contact me at the bottom of this page with a link.

  • Test

    hi how do you start the accordian with no elements collapsed (ie all closed)

  • Anonymous

    Try passing -1 or false for the next to last parameter.

  • Guest

    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.

  • mlykov

    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?

  • http://www.facebook.com/people/Mike-Huckleberry/664909779 Mike Huckleberry

    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 :D

    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.

  • Arman Mkhitaryan

    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.

  • Anonymous

    I will include this feature in the next release.

  • http://twitter.com/_LadyBoo Lady:Boo

    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.

  • http://twitter.com/_LadyBoo Lady:Boo

    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/

  • Occheapi

    Hello. Thank you for your reply.

    I hope you are still working on my problem and solve it soon.

    Thanks again!

  • http://pulse.yahoo.com/_QILHXQ6VZZC2MH7CFEUC7A2AFM Vex Darkness

    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!

  • Norbert

    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

  • http://www.origamifolder.com David

    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!

  • Anonymous

    Sure, you can nest any number of levels.

  • http://www.origamifolder.com David

    Haha, of course! Just forgot to create a new object. Mission accomplished! Thanks!

  • http://www.origamifolder.com David

    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!

  • Mark

    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!

  • Datut

     Hello!, I need to use the accordion twice in te same page.  How can I do it?.  Thanks and sorry for my english!

  • Datut

     Sorry…, I mean two different accordions in te same page.  Thank you!!!

  • Kkinney184

    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

  • http://www.limegreenofficeproducts.co.uk Limegreen

    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

  • Nick

    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
     

  • Nick

    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…

  • Jonathan Riley

    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.

  • Ishmael

    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;

  • Ishmael

    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>.

  • Ishmael

    Those tags after the period shouldn't be there, lol.

  • David Kaiser

    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?

  • http://www.facebook.com/stubert Stuart Chater

    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

  • Derrick Herbert

    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

  • Neil

    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?

  • Neil

    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!)

  • http://www.greenitweb.co.za Khabza

    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+')');

     

  • Chiarigiacomo

    Hi, there is a way to change "<h3>" with "<a>"???

  • Giacomo

    Hi, there is a way to change "h3 tag" with "a tag"???

  • David

    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?

  • Dave

    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!)

  • Info

    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.

  • Mtorosian

    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?

  • Ben

    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

  • Fingers81

    Hi there, Great script. Was wondering if there was any way to change the width of the  accordion including the "buttons"?

    Cheers

  • Ben

    Just change the width declarations in the css.

  • fully

    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.

  • fully

    here again my code

  • fully

    here again my code

  • Bob Donahue

    Is there any way to have multiple section open on page load?
    (Not my preference, but must obey the client! :-)

  • Bob Donahue

    Is there any way to have multiple sections open on page load?
    (Not my preference, but have to try to keep the client happy.)

  • http://www.bina.com.tr söve

    Thank u for posting.

  • Canli

    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)

  • Canli

    I'am sorry but #nested .acc-content should be : border:1px inset #9ac1c9; i mean you should delete "solid" and put "inset" to there.

  • Anonymous

    Amazing, light and beautiful…. good job Michael ;)

  • http://www.facebook.com/people/Nick-Dugger/589796372 Nick Dugger

    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

  • Anonymous

    hi scriptiny, thanks for your script, it's very useful, i use it for my website project

  • http://www.forgetmenotwedding.com Julius

    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

  • http://www.facebook.com/profile.php?id=516438662 Макс Агр

    i need to know this too mario also requested help on this

  • http://www.facebook.com/profile.php?id=516438662 Макс Агр

    cna u respond this pls needed urgently..

  • http://www.facebook.com/profile.php?id=516438662 Макс Агр

    opass me the code will u?

  • http://www.facebook.com/profile.php?id=516438662 Макс Агр

    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.

  • http://www.facebook.com/profile.php?id=516438662 Макс Агр

    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.

  • Pete

    Is there a way to change the background of the h3 tag when the accordion item is open?

  • Zach

    If you're getting this error, make sure your markup is valid (a missing li tag can trigger this).

  • Webbienceonline
  • Nachogarcialuna

    Thank you. Can you insert images in each section? Im trying but they are not showing 

  • Mail

    You are an idiot!

  • Paul

    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. 

  • ab

    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.

  • ab

     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.

  • mrmike

    Great script! Did anyone modify it to toggle the  Expand all | Collapse all links? Would be nice to have only one link..

  • 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.
    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 !

  • Dave

    yes, just add the css class h3.selected

  • http://ladydrivinginstructors.com/ Granulka

    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.

  • kat

    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?

  • DC

    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?

  • Ste

    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

  • Ste

    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);

  • Will Fastie

    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.

  • Muhammad Rashid Azad

    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???

  • Jonathan

    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.

  • flavio

    demo and download off??

  • Pete

    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.

  • De Shan Baptiste

    that didn't collapse all by default for me.

  • Orinasa

    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

  • Claudia Pardina Zuccolotto

    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?

  • rollout

    I have a question about adding images (up, down arrows) to the h3 header section. I have easily added a default down arrow to the closed h3's (with a css class), and use the "selected" class added by javascript to add up arrows when a h3 is expanded, but when that same "selected" h3 is closed after expanding, there is now an empty (class=" ") class on the just-closed h3 – it does not return the h3 to its original class. How could this be accomplished with your script?

  • Robert Lindabury

    We're having problems initialising this when we generate our UL's dynamically. It seems we lose the global scope. Is anyone else using this dynamically generating the UL html and then initing?

    We need to do this as the menu items change. We're trying to use it for a completely dynamically generated user interface for an application.

x
Loading...