jQuery plugin: Accordion

This plugin is now part of jQuery UI and this standalone version won’t be updated anymore. The page will remain as a reference.

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

Current version: 1.6 (last standalone release, now part of jQuery UI)
Compressed filesize: 3829 bytes
License: MIT/GPL

Download
Demo
Documentation

Dependencies

Required

Optional

Support

None anymore. Use the jQuery UI Accordion instead.

Donate

$ USDDonate€ EURDonate


No more comments.
  1. Sándor Kiss
    13. November 2006 |20:25

    Hi Jörn,

    Congratulation for your good work.
    I have found a minor issue with the accordion plug-in.
    The second example on the Accordion demo page (http://jquery.bassistance.de/accordion/accordion.html) throws an error in Internet Explorer 7 when I click on the header rows. (With options, container is a definition list, header dt, content dd)

    Best wishes

    Sándor Kiss

  2. 14. November 2006 |12:36

    Hi Sándor, thanks for your report.

    The bug is now fixed.

  3. 21. November 2006 |17:58

    Hi there –

    Is there a way to set it so that none of the children are displayed by default? Just the list of headlines?

  4. 4. December 2006 |10:37

    Great menu! Works Brilliantly! Only in Firefox though after stying the elements… ??

    Why does it not work in IE6 and 7?
    http://www.restor.co.za/Edwards_info.aspx

  5. 4. December 2006 |15:29

    Andrew, the accordion works fine in IE. Try to update to the latest revision of jQuery, otherwise it’s quite likely that there is a problem within your page. If you can’t find a cause there, please ask on the jQuery mailing list for help.

  6. r
    14. December 2006 |20:28

    Hi Jörn,

    Any chance to change the background colour when you hover over a header?

    cheers!
    -r

  7. 14. December 2006 |20:40

    You you should be able to achieve that effect with some simple jQuery:

    $("#accordion div.header").hover(
      function(){ $(this).addClass("hover"); },
      function(){ $(this).removeClass("hover"); }
    );

    Just add a class hover to your stylesheet with another background colour, eg:

    #accordion div.hover { background-color: #eee; }
  8. 14. January 2007 |02:54

    salut – gefaelt mir sehr.
    zu allem ueberfluss bin ich leider kein
    programmierer. dennoch eine frage:
    kann man dies auch auf ein blogger_template
    wie “meines” uebertragen – wenn ja;
    hast du einen tip fuer mich??

  9. 14. January 2007 |12:42

    maurice: Da das Plugin sehr flexibel ist, was die zugrundeliegende HTML-Struktur angeht, sollte das durchaus möglich sein. Zuerst einmal brauchst du die Möglichkeit, dort überhaupt beliebiges Javascript einzubinden.

    Wenn dir das auch nicht weiterhilft, müsstest du etwas genauer beschreiben, wo du das Plugin einsetzen willst.

  10. 18. January 2007 |08:15

    Hello, I presume you would know but this plugin is not working with JQuery 1.1

  11. 18. January 2007 |21:33

    I’ve tried combining your example with the latest version of jQuery but it didn’t work. It only works with your jquery.pack.js. Shouldn’t be jQuery backwards compatible?

  12. 18. January 2007 |21:40

    There are known and already fixed bugs in jQuery 1.1. The next release, 1.1.1, scheduled for this weekend, includes these fixes. The accordion runs fine with the latest revision.

    I uploaded both normal and packed builds of the latest revision here: http://joern.jquery.com/dist/

    Please let me know about further problems.

  13. 19. January 2007 |15:06

    Hi Jörn,

    There seems to be an error with the animation in FF 2.0 – when I click on one of the titles the sub headings appear for a split second before animating into view. Look at my link here in FF to see what I mean – I have only edited your CSS slightly to fit in with my design:

    http://www.djvern.co.uk/blackout/animated_menu/home5.html

    It works fine in Safari. Is this just a bug with FF and if so is there any way round it? I’m using Jquery 1.1.

    Cheers,
    Dave

  14. 20. January 2007 |11:30

    Hi David,

    I looked at your page, but can’t reproduce the problem. Works perfect on FF 2 (on Windows).

  15. 21. January 2007 |19:08

    If anyone could help me with expanding functionality of this script with cookies (remembering states) + some switches to make predefined tabs collapsed/expanded by default.

    I’d like to have similar functionality to that of menu of this site: http://miejsca.org/

    I am willing to pay if needed and then share the code with everyone, please mail me at mikolaj-i [at] o2 . pl

  16. 22. January 2007 |18:19

    Hi Jörn,

    Thanks for looking at my site. I’m using FF 2 on Mac, so perhaps it’s just an issue with the Mac version. Good to know it’s fine on PC FF tho, most people I know use Safari on Mac so I’m not too worried about this.

  17. pingback

    [...] For anyone using the Accordion menu plugin, or looking for it: Version 1.1 is out! This includes all bug fixes since the first release, update to jQuery 1.1, and an overhaul of the plugin page, including documentation. [...]

  18. pingback

    [...] For a full-blown plugin solution with lots of options, look no further than Jörn Zaefferer’s Accordion Menu. But if you want to try some showing and hiding on your own, read on. [...]

  19. 13. February 2007 |08:39

    Would it be simple to allow closing of an active element? That is, if you click on a header that’s already active, close it. Rather than do nothing.

    I can see in the code where this is checked (and then returns) but I’m not sure what code I should put here to trigger the ‘close’. (or if it will mess everything else up.)

    Thanks.

  20. 13. February 2007 |09:56

    @Jason: Seems like there is more interest in that feature, I see what I can do about it. I’ll try to provide it via another plugin option.

    Update: Ok, its in! Set the “alwaysOpen” setting to false, that allows you to close open elements.

  21. 22. February 2007 |11:13

    I am having a problem with the accordion when is called inside a “thickbox”.

    If you select “browse by category” underneath the search box you will see that the thickbox is calling an iframe where the accordion is displayed.
    In Firefox the accordion has all the elements expanded by default while in IE only the first one does.

    It may be something to do with Iframe and Thickbox on Firefox because if you see the file on its own, it works fine:
    http://www.stockinthechannel.com/Categorylist.aspx

    URL to test: http://www.stockinthechannel.com/

  22. 22. February 2007 |21:16

    Hi Raimundo,

    that seems to be a rather weird problem. I couldn’t really find a hint at what’s going wrong there. You should take this to the jQuery mailing list, odds are quite good that someone there can help you.

  23. 28. February 2007 |09:17

    Hi Jörn,

    Great plugin, but is it possible to remove show/hide animation at all?

    Thanks in advance.

  24. 28. February 2007 |19:33

    Zigurds: I’ve added an animated option. Set it to false to disable animations.

    I’ve also fixed the alwaysOpen option, it should now work.

  25. pingback

    [...] Accordion got the alwaysOpen option fixed (allowing you to close open accordion elements) and has now optional animations (were always used before). [...]

  26. pingback

    [...] Accordion Menu Plugin [...]

  27. Ai
    6. March 2007 |20:12

    Hi Jörn,
    maybe it’s my mistake I can’t figure out, but different name other than selected for active selector and its style doesn’t work for me. It always adds the default – selected. For example if I use active: ‘div.something’ it still adds selected for my style class, not something.

  28. Ai
    6. March 2007 |21:25

    Sorry, found out it myself – hadn’t specified selectedClass. But the thing I really can’t do now is to include more ps or divs inside the title div. Nothing happens if I click in places right where these other ps or divs are.
    Anyway, very nice plug-in.

  29. Jaime
    8. March 2007 |15:19

    Hello, this is a nice plugin, thank you
    I’m trying to use it from a nested list, but I don´t need links at all, so I’d like to apply header to li with class “head”, but this doesn’t work:

    $('#nav').Accordion({
      header: 'li.head'
    });

    It works if I put any element inside li (span, a, hx), but it doesn’t work if I try it without extra markup. Am I missing anything or this extra markup is a must?
    Thanks
    P.s. Sorry for my poor English…

  30. 8. March 2007 |23:40

    @AI: I think that can be fixed by applying the click handler to the header itself and all children. I just wonder why the click event isn’t bubbling up to the titel div itself. I’ll check that.

  31. 8. March 2007 |23:45

    @Jaime: Could you post an example of your exact markup? I need to try that, so far the selectors were pretty flexible, maybe this is an example where they are not flexible enough.

  32. Ai
    9. March 2007 |10:30

    Yup, that’s the thing I was wondering too. It works fine if there is only text in header/title, but if there are another elements in it, the click doesn’t work on those elements, but still works on the header itself where are not these elements, like if the elements inside are smaller than the whole header.

  33. Jaime
    9. March 2007 |12:32

    Hi Jörn, this is what does work:

    $('ul.nav').Accordion({
    header: 'span'
    });
    <ul class="nav">
    <li class="head">
    <span>Header 1</span>
    <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    </ul>
    </li>
    <li class="head">
    <span>Header 2</span>
    <ul>
    <li>Link 3</li>
    <li>Link 4</li>
    </ul>
    </li>
    </ul>

    And this is what does not work:

    $('ul.nav').Accordion({
    header: 'li.head'
    });
    <ul class="nav">
    <li class="head">Header 1
    <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    </ul>
    </li>
    <li class="head">Header 2
    <ul>
    <li>Link 3</li>
    <li>Link 4</li>
    </ul>
    </li>
    </ul>

    Thank you

  34. 9. March 2007 |18:10

    @Jaime: Ok, that HTML snippet helped a lot. There is no way to get that working with the current Accordion, without great efforts on behalf of the plugin.

    But it is very easy to fix the markup to get it working, the overhead is minmal:

    <ul id="list5">
    	<li class="head">Header 1</li>
    	<li>
    		<ul>
    			<li>Link 1</li>
    			<li>Link 2</li>
    		</ul>
    	</li>
    	<li class="head">Header 2</li>
    	<li>
    		<ul>
    			<li>Link 3</li>
    			<li>Link 4</li>
    		</ul>
    	</li>
    </ul>

    Just wrap the next ul into its own li.

    Is that acceptable for you?

  35. 9. March 2007 |18:20

    @Ai: I figured out why that behaviour is happening. Its due to the implementation: It assigns a single click handler to the entire accordion container, instead of each element. The check for the clicked element has to consider the parents of the element.

    That is an ugly drawback of the event delegation pattern.

    Maybe I’ll come up with a soltion, but its not very easy.

  36. Jaime
    9. March 2007 |18:49

    Thanks Jörn

    That’s not a “well formatted” (x)html nested list, so I think it’s better to use a span inside li as I did. It works as expected while the code still is valid (x)html.

  37. 9. March 2007 |18:57

    @Jaime: I have to disagree. And just ran it through the validator, its perfectly valid XHTML 1.0 strict. Please consider that option again.

  38. Jaime
    9. March 2007 |21:04

    Well, It validates but that structure has got no sense to me. The list of items that belong to header1, should be inside of its container (li).
    In your example we have a list which first item is header1 (header of what, if it hasn’t got Childs?)
    The second item is an empty (no text) one with an ul inside (child of…?), and so on. That’s not a good practice, and it doesn’t complain with the most basic rules of accessibility. It validates, but it’s invalid for millions… Of course that’s only my opinion, and I’m not a master in almost anything ;-)
    Thanks for all, Jörn
    Regards from Spain

  39. Eric
    9. March 2007 |21:15

    Is the trigger method configurable? i.e. I would like to use a mouseover instead of a mouse click to expand the menu. Is that possible?

    Regards
    Eric.

  40. 10. March 2007 |12:24

    @Jaime: The original accordion implementation was written with a definition list in mind. The unordered list we have here replicates the structure of that list, therefore it works without additional markup in the plugin.

    As I don’t have any idea how the plugin could handle your first example, I can’t change that. I’d by happy to integrate whatever you may come up with.

  41. 10. March 2007 |12:59

    @Eric: Added! Just released version 1.2 of the Accordion plugin, it now lets you customize the triggering event via the “event” option. The second example in the demo shows it in action.

  42. Jez
    11. March 2007 |12:29

    Hi Jörn, is there an easy way to expand/collapse all items of the menu at once?
    Thanks!
    Jez.

  43. Jez
    11. March 2007 |19:21

    Hi again,
    I made a small amendment so that if you click an active head to collapse it, the class is reset to not selected. This allowed me to add ‘twisties’ as a background image – see my site for it in action.

    // switch classes
    	if(!clicked.is('.'+settings.selectedClass)) {
    		active.removeClass(settings.selectedClass);				
    		clicked.addClass(settings.selectedClass);					} else {
    		clicked.removeClass(settings.selectedClass)				
    	}

    There may be a more elegant way of doing this to the jQuery expert…

    I’m also using:
    $(‘li.menuHighlight’).parents(‘li’).children(‘a.head’).addClass(‘selected’);
    to select a head based on a child item being active (in this case has class menuHighlight). Might be useful to someone.

  44. 12. March 2007 |11:26

    @Jez: The treecontroll is intended for expading/collapsing all at once. I’m sure it can be improved, but so far I don’t have any requests on that.

    I like that menu on your site. If you don’t mind, I’d take that as a reference and put it in the examples and improve the plugin to get that working with less effort.

    One tip: Try to set show and hide speeds to the same value. That makes the movement more consistent and somehow nicer to watch.

  45. Eric F.
    12. March 2007 |11:38

    Hi Jörn,

    I’m using Accordion 1.2 with jQuery 1.1.1 and I’m having the problem that the first content element of my accordion is always hidden when the page is loaded. It seems to be active in the sense that it cannot be activated either.

    I tried the definition list solution (which I prefer for its clean markup), but the problem also occurs with nested divs.

    When using .activate(1) the second content gets activated, but .activate(0) does not activate the first problem. Any ideas?

    My html and code is:

    Machines and time series
    Content 1
    Filtering time series
    Filter options


    jQuery(‘#accordion’).Accordion();

  46. Steven Hambleton
    13. March 2007 |09:23

    Is it possible to have a fly out menu as well as an accordian menu?

    I have a site with a few levels of navigation and I don’t want two level fly out menus.

  47. Jez
    13. March 2007 |11:24

    Jörn – please help yourself. Email me if you need any more input. I think it works really well! Cheers.

  48. Tim
    14. March 2007 |20:45

    Hello,
    This is exactly what I have been looking for. I have been trying to implement this and I am running into a little problem. The problem is that the first node is not automatically expanding when the page is loaded. The “header” is being assigned the “selected” class so I know that it knows it should be shows. If I click the second item in the list to expand it and then click the first it expands as expected. The code I am using is below. (I am not sure how to make the code segment show up so I hope it looks right)

    Sports: Baseball

    News Item 1
    News Item 2
    News Item 3

    Sports: Golf

    News Item 1
    News Item 2

    Sports: Football

    News Item 1
    News Item 2
    News Item 3

    and for the javascript:

    jQuery(‘.menu’).Accordion({
    header: ‘h3′,
    animated: false
    });

    Thank you very much,
    Tim

  49. 16. March 2007 |18:02

    @Eric: What you describe sounds like a problem on your side, as that are the very basics of the accordion that work in all my tests. Still, I may have missed something. The best way to help you: Provide a test page that shows both your markup and your script.

    @Steven: Could you describe in more detail what you’d like to achieve? Are you referring to a menu as the jd_menu dropdown style when talking about flyouts?

    @Jez: Thanks! Will do.

    @Tim: I can’t see anything with what came through the comment filter. Could you post a link to a seperate demo page? That makes finding the problem much easier.

  50. Sameer
    16. March 2007 |20:58

    Hi,

    Firstly, thank you very much for this sweet code. It’s much appreciated.

    Secondly, I’ve implemented your system for my left column site navigation using event: “mouseover” to reveal a heading’s list on mouseover.

    I would like to know if there is any way of adding a delay, so that each heading does not immediately reveal its list but rather it reveals its list after a delay of a second or so.

    Is there any way of doing this? If there is, can you point me in the right direction?

    Many thanks for all your work!

  51. 17. March 2007 |19:28

    @Sameer: Basically that requires adding a timer that is cleared on mouseout. That is not trivial to add to the current accordion code base.
    For reference, you could take a look at the tooltip plugin: It provides a delay before displaying the tooltip.

  52. Sameer
    19. March 2007 |03:09

    Hi,

    thanks for your reply. I will investigate…

  53. pingback

    [...] It’s nothing fancy (yet) but can easily become very good-looking indeed. Take a look at the tiny Navigation Menu Example and judge for yourself. The example is based mainly on the jQuery plugin: Accordion, and the only main difference is the up and down arrows included in the “slightly modified” CSS. [...]

  54. Ad van Gessel
    22. March 2007 |11:59

    I have the following problem with the accordion menu. When I click a button the submenu’s collapse but the link is not working. The a href is filled but it doesn’t work.

    Can anybody help me?

    http://216.32.74.4/~onlinein/

    Thanks!

  55. 22. March 2007 |16:56

    You are trying to mix normal anchors with accordion headers, and that doesn’t work quite well. If you want to use the header link as normal AND open the accordion at the same time, you have to use a serverside-based accordion.

  56. 24. March 2007 |18:27

    Jorn,

    Does your script provide a work-around if parent menu items have no child items? If so, the user must click twice to enter pages where there are no children. Thus in the URL above you must double-click to goto Contact Us page, etc.

    Daniel

  57. 25. March 2007 |22:04

    @Cubefree: That is the same issue that Ad reported, and I don’t have a solution for it yet. Basically the problem is that you want a normal link as well as a trigger for the accordion.

    I’ll look for a workaround that disables the accordion behaviour for header elements that have no content, that should solve your particular problem.

  58. 26. March 2007 |06:28

    Jorn, Yes that is exactly what I need. By the way, a great script! I look forward to exploring your other scripts. Can you update this page regarding any plans you have to integrate with the Joomla CMS? Love your script, and after the client pays, I will most certainly donate to your labors, 25 Euros. Any furth coming solution to this problem is also worthy of an extra donation of 35 Euros. Dank je!

  59. 26. March 2007 |23:26

    Can’t help you with Joomla. I’ll let you know once I find time and a way to fix the header-without-content problem.

  60. 27. March 2007 |21:43

    Until I get the chance to make a new release:

    Change the line 239 saying “return false” to “return !toShow.length”.

  61. pingback

    [...] Another version of this type of sliding menu. [...]

  62. pingback

    [...] They’ve nicked a bit of script from somewhere, but probably best to use a library. I did a moo one ages ago – feel free to steel: Black Sheep Networks But code’s outdated, if I was doing it again, I’d use jQuery: bassistance.de

  63. andi
    3. April 2007 |18:37

    I have a strange problem… I run a win xp sp2 with a kaspersky win workstation antivirus on it (virus definition up to date). the thing is that it gives me the following virus alert: “jquery.accordion.pack.js infected by virus: Trojan-Downloader.Js.Agent.ea”. could u give me a clue as to why this is happening? 10x

  64. 3. April 2007 |20:31

    Jorn, line change at 239, worked like a charm! Thank you.

    I have one other request. Curious, is it possible to make it so that if the user as already expanded a parent menu, then their next click on the parent menu item ignores the parent menu’s URL and only collapses the menu back down? PS. Client still has not paid, yet. But they are a University so they will ;-)

  65. 3. April 2007 |20:49

    @andi: Seems like Kaspesky sees a virus in the compressed version. Either your virus software is better then mine or worse, I don’t get any virus warnings. And haven’t heard from anyone else about any.

    @Cubefree: I need a more detailed description of your problem, but it doesn’t sound to hard to implement.

  66. 3. April 2007 |20:57

    Jorn, so for example, if the user had opened the parent item, say… , then if they clicked the parent, People. It should close the menu, rather than go nowhere.

  67. Maniquí
    4. April 2007 |19:35

    Hi Jorn.

    Did you notice any problem in IE6/7 if there is a <form> inside each part of the accordion?
    I’m running into problems when using a form: they doesn’t dissapear, overlaping any following content.

    Please, can anyone confirm? Thanks in advance.

  68. 4. April 2007 |19:48

    @Cubefree, and anyone else with the same problem: Setting the alwaysOpen option to false solves it.

    @Maniquí: I haven’t heard of any problems with that, but didn’t try it either. I’m pretty sure we can solve that once you can provide a test page.

  69. Maniquí
    4. April 2007 |21:43

    Hi Jörn. Thanks for your quick reply.
    It seems the problem is triggered in combination with jQuery Tabs (.tabs()).
    First time the tab (the one that includes the accordion) is loaded, the problem is triggered: the accordion doesn’t show properly.
    If I switch between tabs and go back to the “problematic” tab, the accordion is fixed magically.

    Sorry, I can’t provide a test page right now because I’m working in an admin side.

  70. 4. April 2007 |22:16

    I’ve seen dozen times problems that were solved quite fast once a test page was available. And the problem you describe is not quite trivial, so I hope you manage to extract the problem into a small demo.

  71. Maniquí
    4. April 2007 |23:37

    Thanks again, Jörn. During the process of creating a small demo (I agree with you about solving problems by creating a minimal test page) I have isolated the problem.
    My fault (and IE6/7 fault, of course, too):

    It seems that a position:relative applied to the <fieldset> element was causing the problem. Removing it fixed the problem
    As said, switching between tabs (or totally disabling jquery.tabs) seemed to be the solution, that’s why I supposed it was a problem between your plug-in and .tabs() (I have to review my logical mechanics, I know).

    Thanks again for your time (and for the plug-in, of course). Don’t hesitate in asking anything if you need/want to know more about this particular problem/solution.

  72. 5. April 2007 |16:49

    Well, I’d still like to see the example page, the combination of tabs and accordion is interesting.

  73. Maniquí
    5. April 2007 |17:21

    Jörn, I’ve sent you an e-mail with a test page.

  74. xavier
    6. April 2007 |23:01

    Is it possible to select otherwise than my index ?

    eg I have an item $(“#entry12″) that I want to select in my accordion. Is it possible ?

    Thanks in advance,

  75. xavier
    6. April 2007 |23:06

    Another suggestion/question:

    I’d like to be able to “do something” with the title links (that is a link to a page that contains all sub items in the accordion).

    Of course, now, if I click on the item, it opens the menu, but doesn’t follow the link.
    How can it be done ? Would it be possible to add an item with a link to the page or add it to the double click event or … ?

    I’m not sure what would be the most user friendly way of not loosing that link. Any sugestion ?

    Xavier

  76. 7. April 2007 |01:05

    @xavier: I’ll try to extend the activate() method so that you can pass an expression to activate the element.

    For your other request: Doesn’t sound like you need a clientside accordion. If you want to open a page when clicking that link, just do it. The accordion can’t help you there.

  77. xavier
    9. April 2007 |22:41

    Hi,

    If you use a ul li structure for your accordion, you can let jquery add you “head” class on the a :

    jQuery(“#navmenu li > ul”).siblings(“a”).addClass(“head”).attr(‘title’,’Click to open, double click to access the page’);

    (the attr title is to add some explaination).

    As to select per id, I tried (li_id being the id of the li I want to open):
    jQuery(“#li_id > a”).trigger(“click”)

    but nothing. Any idea ?

    X+

  78. api
    11. April 2007 |12:17

    hi everyone!
    Does anybody can help me to make accordion working in horizontal way?
    i’m a newbie but i can’t…. ;(

  79. 11. April 2007 |14:50

    @xavier: If you can use jQuery to add the head class, you don’t need that class at all. Just specify the expression for the head option directly.

    @api: A few more details would help. Make up a screen how it should look like, describe how it should behave, whatever.

  80. api
    11. April 2007 |15:15

    tks for your rapidity! ;)
    i give you a link that show what i mean for horizontal

    http://www.nyokiglitter.com/tutorials/horizontal.html

    i hope u will be able to help me.
    thanks SIR!

  81. jkopel
    11. April 2007 |15:18

    Jörn

    thanks for this amazing plugin, and for your continuing support of it!

    I just installed it into a drupal based site and it is working great using a basic dl > dt list.

    Is there is any way to mark some dt elements as “don’t expand”?
    I tried setting header:expand, and only marking the ones I want to be able to click on with class=”expand”.

    This almost works, but it ends up hiding all the unmarked dt elements as well.

    thanks for you help!
    josh

  82. 11. April 2007 |18:34

    @jkopel: Could you provide a simple test page that shows your setup and what you’d like to do with it? That would increase your chances to get a working solution by, say, 1200%.

  83. 11. April 2007 |18:35

    @api: Thanks for the link. I need to take a look at that. I’m not yet sure how difficult it would be to provide that functionality on top of the accordion. Maybe it needs another spinoff.

  84. api
    11. April 2007 |18:58

    Thanks to you Jörn! i hope it will be possible. Could you mail me if u arrive to do that?
    i really need this..
    TYOU!

  85. xavier
    12. April 2007 |14:53

    @Jörn

    Actually, I need to add the class anyway, as I use it to display “>” and “v” icons.

    As for being able to use the link on the head element, that’s taking shape, and Karl Swedberg found the solution to it.

    Basically, the idea is to duplicate the head as the first line (I’m using ul li as a structure)

    $(‘#accordion a.head’).each(function() {
    var $cloned = $(this).clone();
    $(this).next(‘ul’).find(‘li:first’).prepend($cloned);
    });

    et voila !

    jquery is really impressive… and the guys around it are quite something as well. Congratulations and thanks you all !

  86. 12. April 2007 |19:03

    Hey, cloning the first element is an interesting solution. Gonna investigate how that can be integrated into the plugin.

  87. dharmin
    12. April 2007 |23:52

    Hi,

    I am trying to use example:

    Example:
    Creates an Accordion from the given div structure

    jQuery(‘#nav’).Accordion({
    header: ‘div.title’
    });HTML:

    Header 1
    Content 1

    Header 2
    Content 2

    How ever it gives me a runtime error: 0.tagname is null or not an object. Can you tell me why?

  88. Ad
    13. April 2007 |08:26

    I had the following problem with the accordion menu. When I clicked a button the submenu’s collapse but the link was not working. The a href was filled but it didn’t work.

    I work with a frame so what I dit is the following:

    Desktop

    It is really simpel and it works!

    href=”#” onclick=”window.open(‘home.php’,’contentFrame’)”

  89. xavier
    13. April 2007 |10:48

    @jorn,

    FYI I had to add a class to the cloned element to display it differently than the other “normal” sub items. Might be an option to add ?

    As for the select by expression (instead of providing and index), do you think that’s going to be easy to add ?

    I’m still stuck with my failed attempt by trying to trig a click
    jQuery(”#li_id > a”).trigger(”click”)

    Am I missing something obvious ? Am I looking at the wrong way of solving it ?

  90. jkopel
    13. April 2007 |14:33

    Jörn,

    Thank you for your kind offer of help!

    Here is a test page which shows what I am looking at.
    The “menu” is delivered dynamically, and some items will have dd content to show, and some will not.

    If you click the the first “this one expands” you will see a second “This one does not expand” which is hiding inside.
    http://www.kolaborationstudio.com/test/accordian.html

    Thanks again!

  91. api
    13. April 2007 |17:49

    hi!
    i’m still here… ;)
    I founded another horizontal accordion tha use mootools this time.
    Maybe it could help someone to aid me to have this effect with jquery.
    here the link:
    http://www.arbyte.net/f4/

    HELP PLEASE HELP!

  92. Anwar
    13. April 2007 |18:46

    Jörn,

    i have an issue with a menu, i would like to keep the selection persistent through pages so when i click over a link it will open on the browser but the menu don’t reflect the position of the navigation.

    is it possible to make the menu remember the selected this without harcoding this into pages ? i’m thinking about cookies to do this…

    what do you think ?

    Thank you very much for this plugin, it’s great as you are.

  93. 14. April 2007 |10:23

    @xavier: You could use jQuery’s index() method to get the index of the element you want to activate.

    @jkopel: Thanks for the demo. I’ll try to fix that.

    @api: Thanks for the link.

  94. 14. April 2007 |10:56

    @Anwar: I’ve tried to add cookie-based statesaving to the treeview plugin but gave up at some point due to some really weird behaviour on different browsers. Basically it should be no big deal to add it to the accordion, saving you a lot of trouble on the serverside.

    For the treeview, I tried to store the state on page unload. That seemed to work in FF and IE, but didn’t work at all in Opera. And at some point it also failed in FF and IE.

    I think the most realistich approach would be to provide statesaving for a single accordion on one page, and save the cookie on each click. The serialization would be very similar to the treeview, 0 for a didn’t-change-element, 1 for a changed-element. That way only changes that the user actually made are stored.

  95. pingback

    [...] bassistance.de » jQuery plugin: Accordion (tags: jquery plugin accordion javascript) [...]

  96. 16. April 2007 |07:15

    Jörn,

    i am trying to put sublevel navigation in an accordion. i am loading content with jquery in a column to the right and i am trying to get the subnav to have a selected class with no luck so far. do you have any suggestions on how i could implement this function?

    http://commissary.memphis.edu/jquery/

  97. 16. April 2007 |17:38

    @Lucas: For a start you have to remove all those duplicate IDs. With even one duplicate ID, the behaviour is totally undefined. You should be able to remove all those classes on the anchors, too. You should rewrite you add/remove selected:

    var items = $("#item a").click(function(){
      items.removeClass("selected");
      $(this).addClass("selected");
    });
  98. Grover
    16. April 2007 |17:48

    Jorn,

    Thanks a lot for this nice plugin !

    Is there a way to collapse all items of a given accordion from an external trigger ?
    I’ve set up 2 accordions in a page (to make a 2 column menu) and I’d like to close menu A when I open an item of menu B.

    Thanks again !

  99. 16. April 2007 |18:05

    @Grover: You could hack it using the change event, but there isn’t official support yet.
    The good thing, the hack should be easy: The accordion doesn’t “save” any special state, it justs shows and hides elements. So you can simply hide the right elements when something is changed in the other accordion.

  100. Grover
    16. April 2007 |19:08

    Thanks for your help Jörn,

    I got the change event working and I can trigger an activate event on the other accordion, but I still can’t figure out how to collapse/hide all the elements in this accordion…

  101. 16. April 2007 |19:17

    thanks Jörn,

    i keep at it and finally have it working. i acctually have almost the same code that you have but i did not use a varable. is it better to use a varable than to the tag with a class? i have a hide_content class and a show_content class attached to the a tag and i am removing one and adding the other when clicking.

    thanks again

  102. 16. April 2007 |20:35

    @Grover: You need the same selector that the accordion uses to show and hide the content elements:

    $(head-selector-here).nextUntil(head-selector-again).hide();

    That should do the trick.

    @Lucas: I’m not sure what you are up to, but as long as its working, it seems to be fine.

  103. Gareth Price
    17. April 2007 |04:15

    Hi Jörn,

    Thanks for the great plugin. I’m having serious issues with the accordian in IE6 (FF Win and Mac browsers are fine).

    I’m very much the learner with Javascript and would really appreciate it if you could have a quick look at my code and see what you think:

    http://blocklevel.co.nz/_ruth/

    It may be an issue with jQuery as I’ve seen some comments around this but I’m using last night’s build.

    I’d also love to put a link on the h1 that collasped the whole accordian ul… but that’s only a ‘nice-to-have’.

    Cheers.

  104. 17. April 2007 |08:33

    @Gareth and Grover: I’m gonna extend activate() to hide all when passing nothing or null or -1 (not sure yet), that should solve one problem for each of you.

    @Gareth: One thing I noticed so far: You need to call setDefaults before calling the actual plugin method, or it won’t have any effect.

    Have you checked if those other scripts you are loading somehow interfere with jQuery?

    Please try to rewrite your second accordion code initializer like this:

    jQuery('#tier1 ol').each(function() {
      jQuery(this).Accordion({ ... });
    });

    Its possible that I’ve made a big mistake, maybe can confirm that.

  105. Grover
    17. April 2007 |14:19

    Hi Jörn,

    I’m now able to close menuA when I open an item of menuB, but I’m experiencing problems with some strange behavior I’d call css respawning…

    If you go http://tinyurl.com/2jeu65 then click A1 > A2 > B1 > A3 you will see what I mean.

    Obviously, some variable is not reset properly, but I’m too dumb to find which one it is.

    Thanks again for your attention.

  106. Gareth Price
    17. April 2007 |22:33

    Thanks for replying so quickly Jörn,

    Sorry to give you a bit of a panic!

    Turns out a script I added to create _blank links without un-validating my page was causing the issues:


    function init() {

    // Fetch all the a elements in the document.
    var links = document.getElementsByTagName('a');

    // Loop through the a elements in reverse order
    // for speed.
    for (var i = links.length; i != 0; i--) {

    // Pull out the element for this iteration.
    var a = links[i-1];

    // If the element doesn't have an href, skip it.
    if (!a.href) continue;

    // If the element has a className that contains
    // 'external' attach the onclick handler.
    if (!a.href.indexOf('http:\/\/') && a.href.indexOf('http:\/\/blocklevel.co.nz')) a.onclick = PopWin;
    }
    }

    function PopWin(e) {

    // Accommodate IE's non-standard event handling.
    if (!e) var e = window.event;
    var a = e.target ? e.target : e.srcElement;

    // Open a new window with the link's href.
    var newwin = window.open(a.href);

    // The thought is that if the new window didn't
    // (popups blocked or whatever) we want to return
    // true so the link is follow normally. Not sure
    // if this works, but it doesn't seem to hinder.
    return !newwin;
    }

    onload = init;

    As I said I’m not much of a scripter but my guess is that something in the second half which targets IE is causing the prob.

    If you can see an easy way round it great, but I’m not fussed about changing the doctype and losing that script.

    Thanks again.

  107. 18. April 2007 |10:43

    I think you should replace that script with a few simple lines of jQuery, something like this:

    jQuery().ready(function() {
      jQuery("a.external[@href^=http:]").click(function() {
        return !window.open(this.href);
      });
    });

    Untested, but should work withot much further modifications. Eg. modify the href filter for you own domain.

  108. Gareth Price
    18. April 2007 |10:56

    Thanks, turns out that swfObject was also causing issues. I’ve just re-written it to use ufo.js instead (passing variables to the flash and bypassing the IE activex block if using the jQuery flash embed seemed a bit too complex)… hopefully this works.

    I don’t have access to a PC here at home so will test on IE tomorrow morning and let you know how I go.

    Thanks again for all your help

  109. 18. April 2007 |17:47

    Hi- Great plugin!

    I’m trying to use it in a step-wise situation where the user must complete a step at a time before being able to move to the next step.

    Once a step has been completed, the user can return to it to edit it, but they can’t move beyond where they’ve already been without taking some action (answering a question, for example).

    Is there a way to dynamically enable/disable the accordion headers?

    Thanks!
    -Rob

  110. 18. April 2007 |18:18

    Nope, that isn’t possible yet.

  111. Enrico
    20. April 2007 |09:50

    Hey Jörn.

    Great plugin – thank you.

    How would I go about getting it to append the class “active” to the currently selected list header?

    ie so that I get Link

    Thanks for any help.

  112. Enrico
    20. April 2007 |09:51

    Oh, my code didn’t show up, (turned into a link), but you know what I mean.

  113. Enrico
    20. April 2007 |10:36

    Another question Jorn,

    Is there something I can do to keep the accordion open when a nested item is clicked rather than closing, so that it only closes when you chose another header item?

    See here for what I mean. The nested list needs to stay open so that all the sub-items can be seen if the user then choses another sub-item, until another parent item is clicked.

    Big thanks.

  114. Marc
    23. April 2007 |03:02

    I am trying to use the example for list3 with the underlined titles. The code is based on the id of the div though, I would like to have say 20 of these but each with a unique id, how can I do this?

  115. Nichole
    23. April 2007 |16:30

    I also have the same need as Enrico, for the nested items to stay open until another header is chosen. I am using the list4 example, so this is a navigation list. I noticed Jez’s site is doing what I need mine to do, but I can’t recreate it.

  116. 23. April 2007 |19:01

    @Enrico: By default, the active header gets a “selected” class assigend. You can use either that class or change it via the “selectedClass” option.

    @Enrico & Nichole: For that you need either some serverside logic that marks the clicked menu as active, or cookie-based statesaving, which isn’t implemented yet.

    @Marc: I don’t quite get what you need, can you post a demo page?

  117. 5. May 2007 |09:17

    Hi Jörn,

    Is it possible to have more than one section of the accordion open at the same time?

    I guess it would be more like a ‘click the heading to open and close this section’ and clicking it wouldn’t effect any other sections.

    We’re already using accordion for another part of the site (works a charm!) so I’m hoping to use it again instead of adding more Ks to the site weight via custom code and/or additional plugins.

    Thanks,
    Will

  118. 5. May 2007 |12:11

    @Will: The accordion does a great job at not allowing more then one section open at a time. Its really difficult to make it undo that and allow more then one. Until I figure out a better solution, please give “Squeezebox” a try. Its mostly the same as the accordion, but with the behaviour you need. Let me know if that works for you.

  119. Le_Bouz
    10. May 2007 |16:01

    HI,
    Can i get the index of the selected element in the accordion???
    thanks

  120. 10. May 2007 |19:37

    Has anyone successfully used Accordion with Interface [http://interface.eyecon.ro/]? When both scripts are used, I get an error upon firing Accordion.

    Firebug says:

    elem has no properties
    eval(function(p,a,c,k,e,d){e=function(c){return(c

  121. 10. May 2007 |20:36

    @Jason: Are you using a specific interface plugin or just all of them?

  122. 10. May 2007 |21:21

    I’m using the scroll effect. I downloaded one version with only the Scroll Effect and then I tried one with the entire Effects package (not Standalone or Mouse) and I got the same error with both.

    When I removed Accordion, the ScrollTo worked fine, and when I removed Interface, the accordion worked fine.

    I also tried loading Interface first, thinking perhaps something was being redefined, but it didn’t matter which one loaded first.

  123. 10. May 2007 |21:43

    Ok, thanks for the report. I’ll try to fix it.

  124. usp
    11. May 2007 |10:43

    Nice plugin!

    Is there any possibility to get a class instead of the display: none?

  125. 11. May 2007 |20:05

    Jorn, squeezebox worked a charm. Thanks!

    Will

  126. 13. May 2007 |11:55

    @usp: No, that isn’t possible. Could you give me a concrete example how you would use that?

    @will: Cool :-)

  127. RF
    28. May 2007 |00:26

    Another problem with Accordion+Interface.

    Everything was working great until I did a full SVN update of JQuery and Interface today. When Interface is included *after* Accordion, accordion stays all open (i.e. none of the panels are collapsed). Moving Interface above Accordion fixes Accordion, but breaks the Slider plugin in Interface. This is with the full Interface plugin.

  128. 28. May 2007 |21:58

    @RF: Thanks for reporting. I haven’t made any attempts yet to integrate Interface with my plugins. I’ll try to fix it, and contact the Interface authors if necessary.

  129. Goodmixer
    2. June 2007 |12:27

    I’m getting the error ’0.tagname’ is null or not an object when running script in ie7. Works fine in firefox. I’m using the following code:

    jQuery().ready(function(){
    jQuery(‘#sub_nav’).Accordion({
    header: ‘div.trigger’,
    active: false,
    alwaysOpen: false
    });
    });

    Any help would be most welcome

  130. 5. June 2007 |01:13

    Hi, and thank you for this fantastic function!

    I’m trying to use the accordion for a pretty old web shop’s category tree, and by some nesting I have managed to get it working as far as loading all the parameters the right way.
    I use 3 accordions with 3 ID’s – etc. One for the top level, one for the second level and one for the third level, that’s how deep it goes.

    The list is produced as I expect, with the right class for the categories and subcategories that contain deeper content, and excluding the ones that doesn’t go any deeper and all is fine.

    But, it is only the top level and the first top categorys sub-items and third items that actually works. I am guessing it has to do with the duplicated ID’s for second and third levels? Is there any way to work around this? Or is there some other problem?
    I’m thankful for any help. The url for demo of this error is:
    http://www.bluescap.com/nst/test2.php

    Thank you!

    /Torgil

  131. sun
    5. June 2007 |06:36

    jquery.accordion.js should add ->

    function simpleLog() {};

  132. 6. June 2007 |17:03

    @Goodmixer: Could you post an example page?

    @Torgil: Yeah, you’ve got a lot of duplicated IDs, thats a big problem. I recommend to add classes to those sublists (like “level1″, “level2″ and use those classes to select the specifc levels. You could also avoid those classes and use more specific selects (eg. “ul>ul”, “ul>ul>ul”).

    @sun: That function is on the demo page for the sole porpose of demonstrating how to use the change-event.

  133. 6. June 2007 |20:37

    Hello again Jörn.
    I replaced the ID’s with level specific classes to trigger the accordions, and it works like clockwork!

    Thank you for the help, I really appreciate you taking time to do it.

    Thanks again.

    /Torgil

  134. Sergio
    11. June 2007 |17:09

    Hi Jörn

    Just wanted to say thanks for this great plugin, and wondering if you managed to achieve the “horizontal accordion” that API asked for.

    Thanks again.

    Sergio

  135. 11. June 2007 |21:50

    @Sergio: Thanks. No, currently there is no progress on that topic.

  136. Jason
    12. June 2007 |17:59

    Great plugin. I have it functioning well, but have a quick question:

    I’m using the nested UL version, when you click on a header box it expands the list below it. If the original LI that is the header has a link in it you have to click on the link a second time to get it to open that page.

    Mine currently functions identical to the last one on the demo page (Navigation – Unordered List with anchors and nested lists). If you click the List 2 Header it expends, but you have to click the List 2 text link a second time activate the link.

    Is it possible to have it do both functions with one click:
    ex: Open the acordion menu below the header selected and active the text hyperlink within the header LI element?

    Thanks!

  137. 12. June 2007 |20:27

    @Jason: That issue came up before, but I still don’t have a good solution for it. Karl Swedberg came up with the idea to clone the anchor and put it as the first item in the nested list.

  138. 12. June 2007 |23:38

    Hi Jörn,

    Love your plugin! I have a problem similar to Jasons. I (mostly) solved it by binding an load() ajax call to the headers. So the the box expands and the page info (info only, no page reload loosing the current accordion state) gets loaded. (see http://www.ehs.sfu.ca/research)

    BUT I just had an idea: Is it possible to use hoverIntent with your plugin? that would solve the too trigger happy menu using “onmouseover” while keeping the link clickable…..

    My JavaScript fu is not exactly strong, hence the request….

    Thanks

  139. 13. June 2007 |08:52

    @Angelo: I guess I really need to give hoverIntent a shot. It seems like it can be combined with every plugin of mine…

  140. Liz
    14. June 2007 |01:34

    Hi Jörn,

    I read on one of your previous posts (to Anwar on April 13) about state saving. You mentioned that you’ve attempted using the page unload event to pass the state and had some luck in IE and FF – could you post an example of how you did that? I need to be able to save state without cookies and simultaneously allow for sublevels of navigation. Thanks for the sweet plugin!

  141. 14. June 2007 |18:03

    @Liz: Actually I experimented with cookie-based state-saving and the treeview plugin. Though if I get one to work, the other should be easy. An alternative to cookie-based state-saving would be ajax-requests, which of course requires much more work on the serverside. Would that help you somehow?

  142. Liz
    14. June 2007 |21:33

    Jörn,

    Thanks for getting back to me. I need to be able to do this without serverside scripting if at all possible (that would make my life too easy). Would the page unload event be a possibility, or will this absolutely require either state saving w/cookies or server-side scripting. Thanks again.

  143. 14. June 2007 |22:49

    You need one of both. The unload event was just used to trigger saving, though that didn’t work at all in Opera and very buggy in other browsers. A third alternative is using a flash movie, though that is even more obtrusive, but provides much more space to save data.

  144. Liz
    18. June 2007 |17:58

    Thanks Jörn – I’ll pass the word on. Have you found a way to provide “n” sublevels of navigation, meaning, allowing for any number of levels of subnavigation with a single class?

  145. Liz
    18. June 2007 |18:41

    Hi again, Jörn –

    How about this. How would i go about setting the active element based on an id in the body tag. For example, if the the active element would be hard-coded with a corresponding class, “one”.

    Thanks a bunch.

  146. 18. June 2007 |22:49

    @Liz: There wasn’t any intention for accordions with sublevels, so currently I can’t provide an easy solution. If you know how many sublevels there are, you can use the child selector, eg. for three levels this could work:

    $("#nav > ul").Accordion().find(">ul").Accordion().find(">ul").Accordion();

    I don’t understand your based-on-id-in-body tag question. Could you detail that, or put together an example page? It doesn’t sound impossible :-)

  147. Liz
    19. June 2007 |14:47

    Hi Jörn,

    Thanks – instead of using the body tag id, what about setting the active option in accordion to something like:

    $(‘#nav a[@href$="' + path + '"]‘)

    Where, var path = location.pathname.substring(1) ?

    Is it possible to do something like that?

  148. 19. June 2007 |22:17

    @Liz: Sounds possible.

    If I get that right: You use the accordion for page-navigation. You want it to display the current page as active, based on the current location and the href of anchors inside the accordion.

    Right?

  149. Liz
    20. June 2007 |17:41

    Jörn,

    Correct – and if that’s set in the active property in the accordion options, wouldn’t that expand the accordion items accordingly, i.e. saving state (sort of)?

  150. 20. June 2007 |18:58

    @Liz: Yeah, sort of. I like the idea, and it should work for every navigation menu, because the association between current location and href is very flexible.

  151. Liz
    21. June 2007 |02:16

    Jörn,

    I was trying to get this to work but am probably just having syntax issues:

    var path = location.pathname.substring(1)

    ….

    jQuery(‘#list’).Accordion({
    header: ‘div.title’,
    active: ‘#list li a[@href$="' + path + '"]‘

    Any suggestions? Thanks a bunch!

  152. 21. June 2007 |20:21

    @Liz: I guess your selector doesn’t work due to the way jQuery’s not() method works. I’ve tried a similar example that worked, so your approach should be ok. Try it with this:

    active: "[@href$='" + path + "']"
  153. xavier
    23. June 2007 |07:37

    Thanks !

    I’m didn’t realised the svn version contains an option to activate by passing a reference to the method. Life saver !

    For those who look, that’s what I did (accordion on the top of a ul li) to activate the li #ref:

    jQuery(‘#ref’).parent().activate( ‘#ref} > a’ );

  154. tobe
    24. June 2007 |02:02

    hi jörn,

    dein plugin ist echt guad. :)
    aber es zuckt ein wenig während des raus- und reinfahrens.
    fährt also nicht so smooth wie z.b. hier: http://www.apple.com/mac/
    kann man da was machen?
    grüsse, tobi

  155. 24. June 2007 |13:13

    @xavier: I’ll try to release that revision soon.

    @tobe: Am Plugin selber lässt sich da kaum was machen, da einfach nur die Animationen von jQuery verwendet werden. Allerdings werden Animationen in jQuery 1.1.3 deutlich verbessert, und das müsste sehr bald fertig sein.

  156. Liz
    25. June 2007 |17:55

    Hi Jörn,

    Thanks so much. I’ve given your example a shot, but no luck. Maybe it’s because of the way I have my ul’s set up inside of a div? Take a look: https://iris.cair.du.edu/webteam/jQuery/menu/index.htm

  157. 25. June 2007 |21:26

    @Liz: Thanks for the link, that helps a lot. I see where the trouble lies. Currently only header elements are checked “to be active”. Though the location points to a child of those. That needs a little bit more sophisticated filtering, which can be difficult with jQuery not()-implementation. I’ll give it a try.

  158. 27. June 2007 |09:30

    Hi Jorn,
    I have a problem with the accordion in IExplorer but only when it is placed under a flash movie that is placed with the swfObject.js method. Do you know if swfObject.js causes some problem?? Here you can see the accordion working right and not in the same page (when you reload the page in IE 6 it works wrong and show the message problem with 0.tagName):

    http://www.eltaller.net/pruebas/jquery/index.html

    Thanks for your help

  159. Matej Zabsky
    27. June 2007 |17:52

    Hello Jörn,
    I’m trying to make the accordion fill full height of the window as side nav panel. Problem is when I set the DD height to 100%, it becomes to high (as it includes 100% of the DD + heading DTs). DL’s height does’t affct accordion’s height at all (sadly). Do you have any solution for this?

  160. 28. June 2007 |09:52

    @Blanca: Some reported that issue before, but without an example page. That should help fixing it, thanks. I’ll look into it.

    @Matej: Full-height layouts are always tricky. I’m not sure yet how exactly you want to have it. Should everything scale to full height? Or just the accordion-container? More details, an example, whatever you can provide, all helps.

  161. Liz
    28. June 2007 |15:04

    Hi Jörn,

    Any luck with getting the filtering for the active header / child elements issue? Thanks so much for taking look.

  162. Matej Zabsky
    28. June 2007 |16:48

    Look at http://matejz.wz.cz/accordion.jpg. I want the accordion to have its topmost header on the top of the page (it is okay) and its bottommost headers by the bottom of the window.

    I guess it will need some sort of JS height calculations. I can attampt to do it; I just ask if you don’t know about any simplier solution.

    Matej Z.

  163. 1. July 2007 |10:33

    Hi Jörn,

    Is it possible to have accordions inside other accordions?

    My idea is to create a navigation with more than one level.

    I’m trying this js code but it is not working:


    jQuery().ready(function(){
    jQuery('#nav').Accordion({
    header:'a.head',
    active:'false'
    });

    jQuery('.subnav').Accordion({
    header:'a.subhead',
    active:'false'
    });
    });

    Since I have more than one subnav I’m using a class for that.

    Any thoughts?

    Thanks!

  164. 1. July 2007 |12:58

    @Liz: No, not yet.

    @Matej: I see. That looks like very hard if not impossible to achieve with pure CSS.

    The change-event triggered by the accordion should be right place to perform the necessary calculations.

    @Moises: In theory that should work. Could you post the code as an example page? The HTML got messed up by the comment system.

  165. xavier
    2. July 2007 |22:28

    @Moises:

    I have a solution multi level that works (3 levels, based on ul lists). Only problem to solve on ie7 (has someone experienced problem with ie7).

    I’ll publish as soon as I’ve been able to fix it.

    X+

  166. pingback

    [...] An update to the jQuery accordion plugin brings you, among minor bugfixes and a demo overhaul, one notable new feature: The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page. The basic idea came up in the comments on the plugin page and was at first implemented in Bernd Matzner’s HoverAccordion. The basic idea is the same: Find the anchor in the navigation accordion that matches location.href and mark it as selected and open the part of the accordion where it is inside. This gives you a sort of state-saving without the need to generate “selected”-classes on the serverside. [...]

  167. Goodmixer
    9. July 2007 |20:44

    Jörn. I discovered that the error I was getting was caused by using swfobject and no fault in the code. I do however have another question.

    Is it possible to have a link in a seperate block of content open or change state of one of the sections of the accordian?

  168. 10. July 2007 |18:08

    @Goodmixer: Yep. That is the purpose of the activate-method. There are three examples on this page under “activate” and some stuff on the demo page (though currently only in page code). Let me know if that helps.

  169. 11. July 2007 |03:45

    When trying to add the accordion menu to a nested layout the #navigation div is being set to hidden when you click any of the accordian links in FireFox.

    Has anyone else had this problem?

  170. 11. July 2007 |13:28

    @Michael: Could you provide a test page for that issue? Would help a ton to solve it.

  171. uffa
    12. July 2007 |23:12

    @Blanca: I found a the same issue with SWFObject and IE. It seems to work if you execute the SWFObject code at the bottom of the page (below the accordian code)

  172. cage
    13. July 2007 |07:51

    Is it me or is the close function not working?

    jQuery(‘#nav’).activate(-1);

    Also the close example isnt working for me.

  173. 13. July 2007 |10:10

    @uffa: Thanks, I’ll add a note on that in the docs.

    @cage: You need to set alwaysOpen: false for that to work. Let me know if that doesn’t work either.

  174. Murray
    16. July 2007 |01:15

    I had a question about activating a menu by name, but I’ve Figured it out myself, here’s what I’ve done

    first label each submenu (in my case a “ul”) with an identifying class or ID … in my case I’ve used a class.

    then to activate a menu item by name use this code.

    jQuery(‘#mainNav’).activate($(“#mainNav ul”).index( $(‘.Reports’)[0]));

  175. 16. July 2007 |11:10

    Hi Jörn, thanks for this splendid plugin. Probably worth noting that it raises an error when your jquery selector returns no elements to apply the Accordion to. (For instance $(“DL”).Accordion() will error when there are no DL elements.)
    I noticed this when I had generic script on several pages to apply the Accordion, but some pages did not need it.
    Workaround is $(“DL”).each(function(){ $(this).Accordion() });
    Cheers,
    George

  176. 17. July 2007 |17:41

    @Murray: activate also supports an expression, so basically this should also work:

    jQuery("#mainNav").activate("ul .Reports:first");

    The expression is evaluated in the context of the accordion container (here: #mainNav).

    @George: Thanks for the comment. That is a servere mistake on my side, and I should really fix that as soon as possible. Somehow I managed to note but still ignore it.

  177. Eli
    19. July 2007 |05:36

    Hi, I am desperately trying to implement this into my WordPress blog. Can someone please tell me in the simplest and easiest way to do this?

    I know nothing at all about this stuff. I basically just need someone to tell me what to do.

    Would anyone or the owner of this site be nice enough to help? I will e even pay you if you want.

    Thanks.

  178. Gerhard
    19. July 2007 |11:07

    Hi Jörn, please: a short additional explanation of the navigation option.
    I understand, I have to add ” navigation: true”, but what about
    “location.href == “? Do I fill in the URL of the actual page where I want the submenu to open? Why does your example point to a submenu (fantasy)?
    Vielen Dank im voraus
    Gerhard

  179. 24. July 2007 |13:44

    @Eli: You should start to include necessary files (jQuery and the plugin) into your theme. For this site the theme is at http://bassistance.de/wp-content/themes/tonus/. Just add the two script elements to header.php.

    Once you’ve got that you need to find or create the HTML you want to transform into the accordion. If you could provide a few more details, eg. an example, I could give you some more detailed hints.

    @Gerhard: The navigation options assumes a 1:1 mapping from URL of the current page to an anchor in the accordion. And currently it works only for nested lists, just like in the example. You don’t have to set location.href in JavaScript, just click on a link to go to that page.

  180. santiago
    24. July 2007 |15:34

    Congratulations from Argentina. Awesome!! Thanks and good luck ^^

  181. 24. July 2007 |18:33

    @santiago: Thanks!

  182. Michael
    24. July 2007 |18:33

    Good work!

    I have found a bug though.. when you have an accordion inside another accordion, you click a panel (one that is inside your child accordion) to make it show, if you click it again it’ll close both accordions, even if you have alwaysOpen: true

  183. 24. July 2007 |22:38

    Hello Jörn,

    Thank you for this great script.
    I have had no problem getting it to work.
    My only question is, can you make it where I can change a setting to allow it to open up versus opening down?

    Other then that, great job!!

  184. miklb
    24. July 2007 |22:45

    Jorn, excellent work. I’ve tried reading through the comments to trouble shoot this myself, but to no avail. Basically, I’ve add event “mouseover” to my .head items that need to expand, and be clickable links, which works wonderfully. I’m also trying to use the navigation set to true, which also works wonderfully, for all of the subpages of the .head classed list. However, the top level pages, ie /parent/ the entire navigation disappears. Meaning, /parent/child/ works fine, /parent/ no list at all. Is there something I’m doing wrong? If navigation is set to false, this works flawlessly. Thank you so much.

  185. 24. July 2007 |22:58

    Maybe I asked that wrong, i am not looking to make the links go above the header. I am looking to keep the header on top, but for the links to push the header up as the links come out.

  186. miklb
    24. July 2007 |23:47

    I sorta see where the problem lies. It’s got to do with the URL handling with prevailing/trailing slashes. I’m using WordPress and permalinks, so my urls are /parent/ /parent/child/. If I remove the prevailing slash, then things sorta work in FF, but the URL handling is wonky.

    If I use parent/ /parent/child/ then it works well enough, just the parent/ page doesn’t expand the sub-section. The effect is much closer to what I want, but ideally, I’d like to be able to expand the sub-section if clicking the parent page. I hope this makes sense. I can email you the URL to the site I’m working on if that would help, and provide the code I’m using.

    Regardless, I must say you are a shining example of the word community, not only for sharing your code, but your well documented site, examples, and code. Thank you.

  187. massa
    25. July 2007 |06:13

    Guys,

    im using ajax to load the content of each “tab”. but sometimes the content should be updated without choosing another tab. So i used alwaysOpen = false to make this module read the active() method. But the tab collapse, as expected.

    well, there is a way to make .active() work on a already opened tab? If not, i suggest to implement the feature.

    great great plug in!

    regards,

    massa

  188. 25. July 2007 |17:40

    @Michael: I never tried to include one accordion inside another, therefore its not really surprising that is doesn’t work flawless. I’ll give it a try myself, though a demo page from yours would help a lot.

    @Kyle: I already switched from using slideUp/Down to animate() (in SVN), therefore changing the direction shouldn’t be too difficult. But there are more issues related to that. If you work with position:absolute for your accordion it may work.

    @miklb: That sounds like a bug. A link to your page is welcome, even better would be a testpage that just includes the interesting parts. Thanks for those kudos!

    @massa: I haven’t fully grasped what your setup looks like, but it sounds like it should be possible to fix the issue. Could you provide a testpage, that’d make it much easier. Thanks.

  189. miklb
    25. July 2007 |19:25

    Jorn,

    thanks for responding. using your examples, the second list is using the mouseover to expand. Mouse over guitar, click it, and it loads ?p1.1.1.1 when you mouse away from the nav list, the whole box disappears.
    In my case, I’m using /parent/ and /parent/child/ hrefs. If I remove the prevailing slash from the parent, meaning parent/ and /parent/child/ then the navigation works as planned, *except* that because I’m leaving off the prevailing slash, if I click on /parent/child/ then on second-parent/ the URL is /parent/child/second-parent/ which then is a broken URL. I don’t know of a way to show an example, but if you’d like to see the working site, I can email the link to you.

    again, I appreciate your time.

  190. 27. July 2007 |15:24

    @miklb: Thanks, that example is fine and should be enough to fix the problem.

  191. Mikael
    27. July 2007 |15:25

    Hi Jörn

    Thank you for an excellent plugin. I enjoy using it and in general find it easy to use. I have a question though: I am trying to create a “drawer” style accordion like the one on http://www.apple.com/mac/ – look for Mac@work in the lover left corner.

    The effect I am trying to achieve is to use the accordion effect on the image element and always show the link text below. My markup would then be something like:


    description text


    description text


    description text

    Do you have any experience with this type of accordion or do you have any hints on how to solve this challenge?

    Any help is highly appreciated!

  192. 27. July 2007 |15:33

    Ooops – the HTML didn’t make it through. Here is a link the the markup: http://www.itu.dk/people/mikaelm/accordion/AccordionMarkup.html

    Thank you!

  193. 28. July 2007 |09:48

    @Mikael: That is definitely a nicely designed accordion. It should be possible to replicate it using this plugin, but its not trivial. Haven’t tried it yet.

  194. Mikael
    28. July 2007 |13:31

    Thanks for the quick answer. I would definitely like to give it a shot. But I need a few hints. Would you be able to provide a few hints?

    I think it would be a nice and cool feature to add to your plugin.

    Thanks Mikael

  195. Ryan
    28. July 2007 |19:53

    Hi Jorn I have an example for you regarding flash objects and the js

    Index page (works fine on load)

    http://www.performancemarketers.com.au/newsite/

    then (90% of the time not working) on a detail page

    http://www.performancemarketers.com.au/newsite/strategic-marketing/strategic-marketing/positioning–branding-strategy.html

    Commenting the flash objects corrects the problem. Any ideas? I’m not using swfObject.js, they’re just straight object tags

  196. miklb
    29. July 2007 |01:59

    just curious if you’ve had a chance to look at my issue. thanks.

  197. Ryan
    29. July 2007 |08:29

    Jorn, moving jquery, the accordion and the script below the object tags fixed this problem.

  198. 29. July 2007 |09:43

    @Mikael: For a start, try to set up the proper HTML structure and add classes where appropiate. Where are they appropiate? Just apply the accordion plugin to the structure and find a header-selector that gets it working.

    @Ryan: Thanks for the report. That is a weird problem, but its good that there is a solution available, well, at least a workaround.

    @miklb: No, not yet.

  199. miklb
    31. July 2007 |16:19

    Jorn,

    any suggestions on where I might look to fix this. I’d be glad to make a donation or something if you could help me with this issue.

  200. Marcelo
    1. August 2007 |02:24

    Hi, Jörn,

    First of all, congratulations on this great plugin for jQuery. A quick question, though: is it possible to have a fixed-height accordion with it?

    I see there is no optional parameter to do this, and I don’t really like the way everything below the accordion moves when it is resizing. This happens with other accordion libraries, too.

    Do you think there could be a way of setting a height somewhere so the accordion would maintain it’s height? We might need to play with overflows on the CSS, but I have a feeling this might be possible.

    Thanks again,
    Marcelo.

  201. Alex
    1. August 2007 |15:47

    Hi Jorn,

    Accordion is great thanks. I’m trying to write some javascript to expand all the containers at the same time. In March you said that:

    > The treecontroll is intended for expading/collapsing all at once

    Does that mean that Treecontrol works with Accordion, or that it’s only possible in Treecontrol and not in Accordion.

    Cheers, Alex

  202. 3. August 2007 |16:16

    @miklb: I’ve commited a fix for that problem, please give the latest revision a try.

    @Marcelo: That is mostly a CSS issue. Giving the container a fixed height stops the rest of the page from moving. For that to be really useful to plugin would have to calculate the correct height. But as long as you set a fixed height for each content and the total, it works quite well. Something that also helps there is a linear animation, the latest revision (see above) contains a fix for that, too.

    @Alex: No, treecontrol and accordion are completely seperated. You can use the activate-method (see docs) to open parts of the accordion, though until now I haven’t found an acceptable approach to support opening all parts of the accordion.

  203. Marcelo
    4. August 2007 |04:10

    Hey, Jörn.

    I’ll give that a try. Just a heads up: you linked to the https repository url, which asks for login and password. I used the http url, though, and everything went ok.

    I’ll give the linear animation a go.

    Thanks,
    Marcelo.

  204. Ben
    4. August 2007 |21:48

    Hi, Jörn.
    First of all thanks for this great Plugin. But I got a Problem: Everything worked fine locally, but when I moved my Site online, the accordion menu was fully expanded when the page loaded. If hit the Refresh Button on my Browser Safari), everything is fine (collapsed). Any Idea?
    Seems to be a “Safari only” problem, everything works fine on FF & Opera on the Mac.

    Thanks in advance!

    Ben

  205. 5. August 2007 |08:59

    Hiya!

    i didn’t know if you prefer to get feature requests here or on the jQuery list…

    i just started using the plugin today and i’m now your newest fan. :) Here are my suggestions for improving the plugin:

    1) The ‘active’ option should take an integer, to make it symmetric with the activate() method, which takes an integer. Likewise, activate() should accept all arguments which ‘active’ accepts (String|jQuery|Boolean|Element). This should be trivial to achieve by refactoring the ‘active’ handling code into the activate() method, and then implementing ‘active’ in terms of activate().

    2) IMO, setting showSpeed:0 or hideSpeed:0 should be the same as setting animated:false. In practice it makes little sense to have different hide/show speeds (it looks horrible), and i would highly recommend moving that to a single option, animationSpeed, or simply ‘speed’. Also, during initialization, if the user only specifies one OR the other (but not both), then the other should be set to that value. e.g. passing {showSpeed:’slow’} should also set hideSpeed:’slow’ and passing {hideSpeed:3000} should set showSpeed:3000. Currently, the user must specify neither of them or both of them, even though they will always be set to the same values (well, they will if the user is sane).

    :D

  206. 5. August 2007 |22:47

    @Marcelo: Whoops, fixed!

    @Ben: I never tested in Safari. Could you give me at least a version number?

    @Stephan: I read all comments are, but currently lost track of the discussion list, so comments are preferred, though I need an alternative on the long term. Anyway…

    1) Great suggestions! Will do!

    2) Sounds good, too. I already experimented with linear animations (in constrast to the default swing easing), which give a much better behaviour. How about a single option, lets say “speed”: 0 or false to disable animations, a number to indicate speed in milliseconds, or a string (slow/fast/normal).

  207. Ben
    5. August 2007 |22:52

    I’m using the latest Beta Version of Safari 3.0.3 (522.12.1). Maybe it’s just some Beta trouble…

  208. miklb
    6. August 2007 |01:38

    Jorn, that actually didn’t work. On the test example I provided, the section stays open completely now. On my test site, it doesn’t open on mouseover.

    I sincerely appreciate you taking time, and please, if you have a donation link, please provide it.

  209. 6. August 2007 |16:45

    @Ben: I see, lets hope it doesn’t behave completely different on windows then on the mac. I’ll give it a shot.

    @miklb: Right. There is a script error on that page, though I don’t know what is causing that, the exception doesn’t help.

  210. miklb
    6. August 2007 |17:37

    the only change I made to that test was to upload the js file you linked to.

    Hmm….

  211. Cees
    7. August 2007 |09:18

    Hi Jörn

    Following code worked with Accordion 1.3 but failed in IE6 with Accordion 1.4 :

    Item 1

    Bla
    Brrr

    Item 2

    Uch
    Kuch

    And JS :
    $(‘.Show_hide’).Accordion({
    active: false,
    alwaysOpen: false,
    showSpeed: “slow”,
    hideSpeed: “slow”
    });

    In Accordion 1.4 and IE6 all items are open and not one does show/hide.
    I addad
    header: ‘.Show_item’
    to the Accordion options to get it working under IE6 .
    Any thoughts why ? Works as designed or …. !??

  212. Cees
    7. August 2007 |09:24

    Pff, all html marked up gone – here it is without the &lt and &gt :

    div class=’Show_hide’
    h3 class=’Show_item first’ Part 1
    dl class=’Show_text Def’
    dt + dd
    h3 class=’Show_item’ Part 2
    dl class=’Show_text Def’
    dt + dd
    div end

  213. 7. August 2007 |16:07

    @miklb: I’ve commited a few more fixes. Could you give that another try? And maybe also update jQuery.

    @Cees: I’m not sure what went wrong there. Could you also give the latest revision a try? Please note that I’ve simplified the options, so instead of setting both showSpeed and hideSpeed, you can now set just animted: “slow”.

  214. miklb
    7. August 2007 |17:52

    I uploaded the version of accordian and jquery that you have in your repo, and now everything stays open, no collapse at all. Anything else change that I need to adjust in the code?

    My previous demo site is still live with the new files.

  215. miklb
    7. August 2007 |18:01

    Hey! I downloaded the the zip of the repo, replaced all the files and changed the code in the head, and it works as expected. Fantastic! Perhaps removing the alwaysOpen made the difference?

    Thank you very much for you work on this. Let me know if there’s anything I can do for you, I’ll keep monitoring this page regardless.

  216. 7. August 2007 |19:30

    @miklb: Hmm, okay :-) I’d definitely like to see the result of your work, if that is possible. I hardly get to see usages of my plugins in the wild.

  217. miklb
    7. August 2007 |19:50

    If you send me an email address, I’d be glad to send the link. I’d rather not post it publicly, it’s not my personal site.

    Yeah, I realized I didn’t update the test site :D sorry

  218. Xscratch
    8. August 2007 |14:24

    First of all, thanks for this great tool.
    Unfortunately I encountered a problem: in IE the I get an error if there is a HTML comment tag in the code

    <div id="accordionTest">
    <!– simple comment –>
    <h3><a href="javascript:void(0)">A</a></h3>
    <p>
    Hello
    </p>
    <h3><a href="javascript:void(0)">B</a></h3>
    <p>
    World
    </p>
    </div>

    How can I solve this?

  219. jseg
    8. August 2007 |19:00

    Jörn,

    Great plugin. Just one problem I’m seeing with the demo and my implementation with the navigation on FF. When clicking on the last ‘head’ the list opens at a greater height then adjust it’s self. This causes a bounce effect in FF. Any suggestions on how to open the last list item without this effect?

    jseg

  220. 8. August 2007 |22:44

    Can someone please help me i uploaded the new jquuery but i cannot seem to get it to work just right, if you look at the site. The navigation menu always goes back to the original element and it stays open it doesnt leave open the navigation menu that they just selected. What can i do

  221. 8. August 2007 |23:01

    Which file am i supposed to put the following code in:

    jQuery(‘#navigation’).Accordion({ active: false, header: ‘.head’, alwaysOpen: false, navigation: true });

    My goal is to use example two in the demo.

    Please help

  222. Ben
    9. August 2007 |18:20

    Hey Jörn,
    the Safari Bug is really a Beta Problem. The Plugin is working fine in the latest stable version of safari, at least the part I use.

    Your example at the top of the page:

    jQuery(‘#nav’).Accordion({
    header: ‘.head’,
    navigation: true
    });
    location.href == “somedomain.com/movies/fantasy/”

    doesn’t work for me, because I’m using the plugin in a cms, so I got no static content. Is there the possibility to check the url (I’m using clean url like the example) itself like in this case, if “fantasy” is somehow in the url -> navigation:true…

    Sorry, I’m not a hardcore js-coder. Do have any idea?

  223. jonny_noog
    10. August 2007 |03:03

    Hello,

    I am experiencing an issue with the accordion plugin being used with a form, when viewed with IE 6 and IE 7 and I’m hoping someone here may know what the problem is. I have created a simple page to hopefully demonstrate:

    Untitled Document

    Section 1

    What is the subject’s gender?

    Male

    Female

    Section 2

    What is the subject’s dominant hand?

    Left

    Right

    The issue is that the first radio button of each set on the page should be checked (as you can see they have checked=”checked” set) and in Firefox, they are. But in IE 6 and IE 7 they are not checked no matter what I do. If I disable the accordion and view the page again in IE, they are checked as expected. So this would lead me to believe that there is some kind of incompatibility between jquery/accordion plugin and how IE handles radio buttons (and possibly checkboxes but I haven’t tested checkboxes).

    Any idea what’s going on here? Any help much appreciated. And sorry for the long post, I just wasn’t sure where else to post.

    I hate IE so much.

  224. jonny_noog
    10. August 2007 |03:07

    Oh, sorry it appears that the HTML I posted in the previous comment didn’t make it through. Fair enough.

    But even without my example page this issue should be pretty easy to replicate. All the page had on it was an accordion with two sections, and a set of radio buttons in each section, the simple issue being that when the radio buttons are viewed with the accordion in IE, IE appears to ignore the checked=”checked” attribute.

    If any further information is required, I’m only too happy to give it as I am very interested in solving or finding a good work around for this issue.

  225. jonny_noog
    10. August 2007 |05:17

    Hello again,

    Further investigation into my issue seems to indicate that having a single form spanning across multiple accordion sections is what causes the radio button issue in IE 6/7. if I give each accordion section its own separate form, IE appears to work as expected… Which means I will likely have to re-write half the work I’ve done over the last 3 days just to accommodate IE’s “excentricity”. Yay, why did I become a web developer again? :P

  226. Cees
    10. August 2007 |10:22

    Tried with CVS version – no luck – still all items open in IE6 when loading page and show/hide also does not work = class selected is correctly applied when clicking on header but no action follows.

  227. 10. August 2007 |11:06

    @Xscratch: That is weird. No idea yet, but I’m gonna look into it.

    @jseg: I’m working on that behaviour.

    @Angel: Just put it somewhere on your page, inside a $(document).ready(function() { … }) block.

    @Ben: Sorry about the stupid example. I just wanted to illustrate how the navigation-option worked, but failed utterly. There is nothing you have to do then set up a list of links. If you click one of them, the browser goes to that page, therefore the value for location.href changes. And the accordion plugin reads that value, can therefore find the clicked link and opens that accordion part. I think its important to know what happens, but you don’t have to actually code anything for it to work.

    @Cees: Could you post a test page?

  228. Ben
    11. August 2007 |14:24

    Thanks a lot. I should just have tested it. My Bad.
    Works perfect.

  229. 12. August 2007 |22:10

    Another vote for a “save state” :) – I’m implementing the Accordion on a few WordPress themes and have some ideas for using conditionals to set the states, but for those without server side experience, a cookie based state would be awesome.

    Keep up the great work! :)

    -Jonathan

  230. Claudia
    13. August 2007 |16:08

    Hi Joern

    Very nice plugin. Just one really minor issue: I display the accordion on most pages which is why I have included it in my main js file. Unfortunately on the few pages where I do not have the accordion I get an error about
    jQuery(“:first-child”, this)[0] has no properties
    http://karzoo.local/beta/js/jquery.accordion.js
    Line 174

    The reason for this is quite clear as the element that I have attached the accordion to does not exist on these pages and thus there is no html element in [0]. I have just added an extra check around the call of the accordion which works fine, but most of the other jquery plugins simply don’t do anything if the element does not exist. It would be nice if accordion could do the same.

    Nevertheless – thanks for the good work.

    Claudia

  231. thijs
    13. August 2007 |16:23

    Hi Jörn,
    I have the same problem as jseg regarding animated=true in FF,but I have a bit more info!

    In FF, if you expand any item -apart from the first(?!)- you will see that it first expands to a *double size* list, after which it contracts to the correct size. In IE it works perfect, very smooth…!

  232. thijs
    13. August 2007 |22:46

    Regarding the FF flickering. That seems to be a jQuery slideToggle problem.
    Changing the to nested seems to solve my FF problems, so that’s a good work around.

    Menu 1

    Menu 1 item a
    Menu 1 item b

    Menu 2

    Menu 2 item a
    Menu 2 item b

    and in the css
    #nav a { display:block; }

  233. Cees
    16. August 2007 |09:34

    One simple question but i can not get my head arround it : printing a page with an accordion on it. I like the complete accordion to be open when the print is made – all items visible but i do not like the user to first open all items and then print the page.
    Is it possible to use the ‘normal’ print function of the browser and then print out the page with all items open ?!? I have tried with a media=print css stylesheet but the display:none is invoked by the accordion-js and can not be overruled – afaik.
    -Cees

  234. 16. August 2007 |14:51

    I didnt read all te reactions but did you ever found out :
    http://jquery.bassistance.de/accordion/?p=1.1.1
    now click on it and it dissapears

  235. 17. August 2007 |14:56

    @Jonathan: If you use the accordion plugin for navigation you get state-saving for free: see the navigation-option. Otherwise: Can’t promise anything, but I’ll keep it in mind (and on a todo list).

    @Claudia: Good catch. Its fixed in the latest revision.

    @thijs: Thanks to some help from John Resig animations are now greatly improved. I’m just finishing up the next release.

    @Cees: The tabs plugin solves that nicely by using an extra “hide”-class instead of display:none. So far the accordion plugin didn’t depend on any stylesheets, but I think that is worth the trouble – I’ll try to fix that for the next release.

    @vinnie: That should be fixed by now, included in the next release.

  236. 20. August 2007 |12:24

    Hi Jörn!

    Thx 4 this great plugin!
    Eine Frage / Wunsch: Kann man das Teil auch so steuern, das die einzelenen Accordion-Inhalte unabhängig voneinander auf und zu geklappt werden können? Sprich: Man kann beliebige aufklappen ohne das die anderen zugehen.

    Viele Grüße
    Jürgen

  237. 20. August 2007 |21:14

    @Jürgen: Nein, das wird auch nie möglich sein. Lässt sich aber auch mit jQuery-Hausmitteln derart einfach implementieren, das es niemand stören sollte. Dieses Plugin gibt sich große Mühe zu verhindern, mehr als einen Teil zu öffnen. Diese Beschränkung zu entfernen ist wesentlich aufwendiger als ein passendes Plugin zu schreiben.

  238. Cees
    23. August 2007 |10:59

    Is it possible to add Keyboard control to an Accordion ? All is focused at this time on mouse events but what if a user wants to control it with his keyboard ? This in reflection of some recent (general) accessibility posts in several blogs.

  239. 23. August 2007 |23:56

    Maybe you can help me?
    http://www.charliesfarmandhome.net/new/

    The accordion does not work in IE6, it works in all other browsers tested.
    I have tried many things, but I guess I am maybe missing a vital piece of code or something?

    I hope you can help, this is the only thing stopping me from being able to launch… of course after I get my content.

    Thanks for the great script, hope you can help me figure out something if you get a chance!

  240. pingback

    [...] Plugin Page and Documentation Demo [...]

  241. Cees
    25. August 2007 |14:00

    Hi Jörn – js of 1.4 replace by 1.5 – following error :
    $.Accordion.Animations[settings.animated] is not a function

    JS – $(‘.Show_hide’).Accordion({
    header: ‘.Show_item’,
    active: open_id,
    alwaysOpen: false,
    animated: “slow”
    });

  242. joseluis
    26. August 2007 |15:45

    Thanks!

    autoheight don’t work :-( with

    jQuery(‘.menu_desplegable’).Accordion({
    autoheight: false,
    animated: ‘easeslide’
    });

  243. joseluis
    26. August 2007 |19:27

    and don’t work :-( with

    jQuery(’.menu_desplegable’).Accordion({
    autoheight: true,
    animated: ‘easeslide’
    });

  244. Leandro
    27. August 2007 |05:44

    Hello, great plugin!. I had problems with the height calculation together with animations.
    Changing the line 170:
    var height = settings.toHide.height();
    by:
    var height = settings.toShow.height();
    fix the problem…
    I hope that it helps. Regards!

  245. 27. August 2007 |18:00

    Hi, a little help!?

    Love the plugin, great for quick and easy accordions. I’m having a problem using it to Show / Hide a form though. Here is my test page:

    http://d3797719.u113.hosting365.ie/frontdev/test/accordiontest.html

    The form expands fine, but clicking “Giftwrap” again doesn’t collapse the accordion. Also in IE7 there is an error message “Out of memory at line 1947″

    Appreciate any advice on sorting this out, I have achived similar using mootools in the past but i’m using jquery for other elements of the site so don’t want to double up on scripts if I can help it.

    Thanks!

  246. Claudia
    28. August 2007 |22:41

    Hi there

    Is there a way to specify the content that should be shown when hovering over a certain heading?
    Reason for asking: I have a list that is kind of heads up – in each li there is first the content followed by the heading:

    content for item 1

    item 1

    content for item 2

    item 2

    content for item 3

    item 3

    So when hovering over the title div of a list entry the content div should appear and the content div of all the other list entries should disappear. At the end it should look like the drawers used in the right hand menu on the downloads page of apple (http://www.apple.com/downloads/).

    Any tips on how to achieve this using the accordion?

    Thanks

    Claudia

  247. Cirieno
    28. August 2007 |23:30

    Hi there. Have you made any progress with the Accordion + Interface situation? I ask after spending hours trying to find the bug in my code that was breaking things, then discovering it was a known issue. As Interface is possibly the widest-used effects plugin I think many other programmers will come up against the same issues, which is a shame as your Accordion functionality seems to be much better and smoother then theirs. Also, does it create problems if a plugin/function has the same name as a previously-defined function?

    jQuery 1.1.4 + Interface 1.2

    Thanks for the incredible work!
    -Ciri

  248. 29. August 2007 |09:05

    It’s late and maybe I’m wrong but there seems to be an infinite recursion error (Firebug says “too much recursion”) when multiple dd tags are used inside a dt tag. Maybe the plugin was never meant to be used with this html structure.

    Example: http://rmip.com/accordion/
    Top example has the problem. Error occurs on clicking a heading.
    The bottom doesn’t.

    jQuery version is 1.1.4.

    Erin

  249. Pablo Soler
    29. August 2007 |21:33

    Hi Erin,

    You should think having just a single dd container in witch you can put any xHtml block elements. Style them with CSS and fly like the wind.

    clicker zone one

    whatever one
    whatever two
    whatever (…)
    whatever last

    clicker zone two

    something one
    something two
    something (…)
    something last

  250. Cees
    30. August 2007 |12:47

    Mmm, ok, problem solved – animated:slow is not supported anymore.
    Jörn – is it possible to note somwhere (maybe in the release notes ?) when certain options/defaults are changed in new version and not downward compatible ?
    Makes it easier to implement new version.
    -C

  251. 31. August 2007 |18:12

    @Cees: Sorry for the trouble. You’re right, I should have noted that.

    @joseluis: Could you post a test page?

    @Leandro: Thanks for the report. I’ll give that a try.

    @cormac: Please try to wrap the h3 and form elements into another element.

    @Claudia: So far the plugin uses nextUntil to determine the content elements. Due to some changes in the animation system that doesn’t work so well anymore, next() would achieve the same. Making next() configurable (replace with prev()) should be possible. I’ll give it a try.

    @Cirieno: Sorry, there isn’t any progress on that front. And most likely there won’t be in the future: Interface’s successor, the UI project, is scheduled for the third September.

    @Erin: Thanks for the report. That is a regression bug introduced by the change in the animation system. It can be avoided by using only a single content element between each header element. I’ll try to find a more solid solution.

    @Pablo: Right. That restricition makes the plugin much simpler and isn’t really a problem from a styling viewpoint.

  252. 1. September 2007 |17:11

    Ganeshji Marwaha, from the mailing list, said, ” i think that it is kinda disturbing if we hover on one item and immediately if we hover on another item, the accordion doesn’t open for the second item.” I agree with him and think that the interface should always be responsive to the user. If the mouse is over a menu item (header) it should activate. All animations in effect at the time should proceed immediately to their end state. The animation is really just an ‘extra’. The ability to navigate a web site by accessing the menu items is of paramount importance.

    One possible solution might be to offer either behavior as an option. Another might be to incorporate the hoverIntent plugin.

    Thanks for all your work on this. I, and I’m sure the jQuery community, really find it valuable.

    Erin

  253. 1. September 2007 |19:08

    Hi Jorn,

    Excellent work – keep them coming!! :)

    I have found a problem tho… if I include interface (http://interface.eyecon.ro/) the drop-down breaks?? I’ve made a quick example for you http://www.electricsnow.co.uk/jorn/

    Any help would be ace! But I know you’re busy!

    Many thanks,

    Robin

  254. 1. September 2007 |19:09

    Doh!! – Sorry Jorn, just spotted that this bug has been reported ages ago! My bad!

    Rob

    Note to self: must read all posts before posting. :)

  255. Grayson Koonce
    4. September 2007 |03:10

    trying to get the Accordian to stretch 100% verticle to the div its inside, but doesnt seem to work. is there a correct way of doing this? or should i be looking for another accordian.

  256. 4. September 2007 |17:31

    Thanks that worked, problem solved.

  257. 4. September 2007 |19:18

    @Erin: Thanks for comment. There are a few technical implications on that matter, but I’ll keep that in mind and try to find a solution that allows you to configure the preferred behaviour.

    @Robin: Interface overwrites jQuery’s animate method, which breaks the accordion plugin. Klaus Hartl had a similar problem, and his solution was to rename the animate method in Interface at all occurences. The topic came up on the jQuery discussion list recently as well.

    @Grayson: I’ve been tackling that problem, but haven’t found a correct solution yet. Basically I’m tacking the width of the parent element, substract the height of each header and use that as the height for each content element.

  258. mario
    6. September 2007 |13:15

    thx for this nice stuff here, it really beautiful and practical thing
    looking forward to implement this in my web site..

    just one thing i noticed related to your last update..

    switcher its no longer working for first example… (just have to activate the switch variable…, or i think so ;-) )
    combobox switcher is the really nice feature to have (didint noticed anyone have it arround!)

    also i would to suggest to make some horizontal variant of accordion, as well as gliding effect variant…it would look really cool!

    thx once more!

  259. mario
    6. September 2007 |13:29

    i will be little precise

    i ment on this example: (this one is stylsh one )
    h..p://dev.jquery.com/view/trunk/plugins/accordion/

    sorry if im wrong, but i see now demo is working fine

    thx! by

  260. Sérgio Pinto
    7. September 2007 |16:02

    Hi Jörn.

    First I just wanna say thanks for your excellent work.

    Second before I ask for your help just wanna say that i’m kind of a noob :P

    My problem is as follows…

    Mybe the best way is for you to take a look, and see what might be wrong.

    Link

    It’s working great in IE 6 – Opera – FF – Safari but not in IE7

    Hope u can help.

    Thanks.

  261. 7. September 2007 |18:41

    Jorn- Re. the comments about HTML comments causing trouble in IE, I’m also seeing this behavior in IE6 and 7.

    Using the default DL methods, I had HTML comments between my DL and DT tags and the plugin didn’t work (although no error was thrown).

    I think IE’s DOM explorer considers comments nodes of a sort, so that may be the issue.

    Either way, removing HTML comments from the markup that is to be Accordioned resolves this issue.

    Great work!
    -Rob

  262. 8. September 2007 |12:45

    @Sergio: That link isn’t working.

    @Rob: Thats weird. I’m currently not sure how jQuery handles comments, but that may be the source of the problem. Or the nextUntil method that I’m still using, though I plan to replace it with next.

  263. Sérgio Pinto
    8. September 2007 |15:12

    Hi Jörn.

    Wierd, the link is working fine here. Can u give it another go please? Anyway I’m using anchors for the header “toggler”, I’m doing this so I can accomplish an hover effect with css, this way the hover effect work with IE6 but on the other side the accordion is not working to good on IE7, only way it does work is if i close the opened content first before opening another. Like i said earlier i’m kind of a noob, so please forgive any stupid questions :S .

    Thanks.

  264. Panagiotis Halatsakos
    10. September 2007 |00:26

    Hello, is there anyway that this plugin could load multiple nested ‘s and convert them into inner accordions?

    like having a level one accordeons and then a second one (clicks) with a different colour style?

    That would be very helpful into a weird project I am having.

  265. 10. September 2007 |09:30

    @Sergio: That worked, thanks. According to some IE7 debugging, the script tries to set a height of -3px to some element, which IE doesn’t seem to like. I don’t know yet how/why that happens.

    @Panagiotis: You can apply the accordion manually to multiple levels. Give them a class to distinguish the different levels, and all should be fine.

  266. 11. September 2007 |06:45

    Hi Rob,

    Is it possible to have the contents called from external files for the subsequent accordions?

    The first one have static content, meanwhile other accordions calls HTTP requests when clicking..And caching of the content itself?

  267. 11. September 2007 |09:48

    @kung fu suit: No, that isn’t supported, and won’t be available anytime soon.

  268. Cees
    11. September 2007 |11:47

    Hi – any chance of running jQ 1.2 with Accordion 1.5 ?!?

  269. Sérgio Pinto
    11. September 2007 |15:45

    Hi Jörn,

    Thanks for taking a look, just wanted to know what do u use for debugging in IE7…and if u have any advice to what i should do to get it working on IE7. I suppose with the debugging tool i could probally try and fix it myself.

    Would it be asking too much if u could send me a sceenshot of the debugging?

    Once again thanks alot.

  270. Jim
    11. September 2007 |21:44

    Hi Jörn,

    Thank-you for the excellent plugin! One question, however. I am attempting to create a site that will gracefully resize by utilizing em-based measurements for height and width. The accordion plugin, however, places an inline css height value in pixels. Is there any way I can override this/change it?

    Thanks again.

  271. 12. September 2007 |03:03

    Is ther a way to nest one accordion inside of another?

    //My HTML

    Parent 0

    I’m a parent

    Parent 1

    I’m also a parent, but with a nested accordion

    Nested 0

    I’m a nested element

    //My JavaScript

    jQuery().ready(function(){
    // simple Accordion
    jQuery(‘#list1′).Accordion({
    header: ‘.header1′
    });
    jQuery(‘#list2′).Accordion({
    header: ‘.header2′
    });
    });

    You can go to http://acrowder.untergeek.net/lab/jquery.accordion/jQuery.html and see what I’ve got so far. The irish thank you in advance for any advice you can give. :)

  272. 12. September 2007 |12:08

    Hi there,

    I’m in the process of implementing your accordion menu on a new site I’m developing but I’ve run into a couple of issues.

    Firstly, when initially visiting a page and clicking a header item, a number of child elements are not displayed in the accordion. In fact, in this case, it seems only 4 items from each menu are initially displayed. If you click around the header items a few times, eventually, the correct number of items will begin to be displayed.

    Have a look here

    Also, run time to time and especially in Safari (for Windows, which is still in beta to be fair), when you first go to a page, all child menus are open. This is intermittent and I can’t see any particular reason for it.

    I hope you can help as these are pretty much “show stoppers”…

    Many thanks in advance,
    Terry.

  273. 12. September 2007 |20:08

    Hello and thank you for the wonderful accordion plugin. My first experience with jQuery has been great so far… with one issue that I cannot sort out.

    http://comparemyagent.com/forms/_js_src.cfm

    Everything works great… perfect, really… except for IE7, where I get ‘invalid argument’ on line 723, col 30, when trying to click the first ‘next’ button. Other browsers are fine, no js errors thrown at all.

    I have messed with this for hours and finally have it narrowed down, though I do not understand it.

    As you can see, each of the sets of form fields is inside a tag

    If I delete the opening and closing tags from the first section, the whole thing works fine in IE7, and all the others. If I put the back in, it breaks in IE7, throwing that error.

    Do you have ANY idea why the fieldset container is affecting the function of the page in this way?

    I have no doubt it could be something in my markup, but I am not seeing the forest, or the trees, at this point! Thanks in advance for any possible help….

  274. 12. September 2007 |20:16

    oops .. my html got stripped, shoulda thought of that, sorry

    what I was trying to say is “fieldset tags”

    when i take out the first fieldset, the thing works fine
    when i put it back in, ie7 chokes, as per the example page posted

    thanks!

  275. 12. September 2007 |20:37

    Holy smokes… I just got a flash (ok more like a flicker) and decided to play with the element order.

    Simply putting a tag after the closing fieldset, before the button, seems to have fixed it in IE.

    The same page should now work in IE7, but I will leave the broken one up in case anybody wants to take a look (just a demo, not my real page).

    So now my question is WHY this would matter?

  276. 12. September 2007 |20:43

    and actually… it seems to be the br tag before, not after, the fieldset that did the trick ( I put both as a test, only the one before the opening fieldset actually fixed it)

    sorry for so many posts on this, last one promise!

  277. agustin
    12. September 2007 |21:00

    Thanks for you accordion plugin.

    There is a new version of jquery (v. 1.2) , and I believe accordion not work.

    Is this true?

    Greetings from Spain.

  278. 13. September 2007 |14:01

    Hi Jörn, Great plugin! The animations don’t seem to work properly with jQuery 1.2. If I use “animated: false”, it works. If I turn on “animated”, it doesn’t seem to work properly. Any suggestions?

    I have alwaysOpen set to false. If I close a section, and then open the next section, it works. If I click the next section without closing one, it doesn’t work. I’m using a definition list . Any help would be appreciated.

  279. Sérgio Pinto
    13. September 2007 |17:13

    Hi Jörn,

    Just wanted to let u know that I figured my problem out, reviewed the whole of my css and it had some stupid errors :S Once again thanks for u’r help. If ur interested u can check it working here.

    Best Regards.

  280. 13. September 2007 |17:53

    @Cees: Did you try that compability plugin until a new release is out?

    @Sergio: I’m using the Script Debugger that comes with Microsoft Office. Its buried somewhere in the installation tool. There is also a free debugger, check this reference for debugging tools in IE for details.

    Glad to hear you figured it out even without those tools.

    @Jim: I have to check the support in jQuery 1.2 for relative values. But so far there isn’t anything but pixel heights.

    @IrishLadd: You’ve set a wrong class in the nested accordion. There is another “header1″ which should be “header2″.

    @Terry: The first issue seems to be an incorrect calculation for the animation. I haven’t figured out yet whats is wrong there, but I’ll look into it.
    I’ll test in Safari, too.

    @Michael: Now that is another stupid IE bug. Thanks for reporting.
    You may want to check my validation plugin, for, well, validation ;)
    The latest revision supports validation of subforms. It isn’t documented yet, but there is a demo which you can check.

    @agustin: Yes. I haven’t released an update yet, but until then the compability plugin should fix all issues. Though issues with animations may be a different story.

    @Jeff: The animations in the accordion plugin rely on some jQuery internals, any those changed a bit. I’ll look into it. Thanks for reporting!

  281. Suzanne Harmon
    13. September 2007 |20:52

    I’m a newbee. Love the menu but I’m having a difficult time trying to attach images to the main navigation.

    Can this be done?

    tia

  282. Chango
    14. September 2007 |07:38

    Does anybody can help me to make accordion working in horizontal way?

    I really need this to,
    thanks!

  283. 18. September 2007 |10:58

    I was wondering what the chili-1.7.pack.js file is used for….
    I removed it from the index.htm example page and accordions still work.

  284. 18. September 2007 |14:11

    Hi Jörn,

    Will future development of the accordion plugin be mirrored in JQuery UI, or is that now a separate branch?

    Best,

    Mike

  285. ZNS
    18. September 2007 |17:47

    Hi!

    Nice work although I’ve find one bug if you can call it that. The following does not work.

    Head
    Dynamic content

    Doesn’t get the correct height of the scrolling div. Just thought I’d let you know.

  286. 18. September 2007 |20:33

    @Suzanne: That should be possible. Could you post an example page?

    @Chango: There are other accordion implementations that do exactly that, though not this one.

    @Leandro: That used only for code-highlighting. The actual dependencies are listed on this page.

    @Mike: The idea was to continue development as part of UI. So far the accordion in UI and this one are identical. I haven’t decided yet on how to continue that, there are a few arguments for branching the development.

    @ZNS: Could you post that as a demo page? Thanks.

  287. 19. September 2007 |17:48

    I’ve got the same problem as Leandro.

    It basically uses height of the first element I hover over, instead of a height of the highest element.

    I tried his hack. It works but It throws up errors in the console:

    Dom style property
    Invalid value for property height:
    Line: 1
    -XXXpx

  288. 20. September 2007 |01:06

    Love the accordian, thank you!

    Is there any way for the accoridans to be different sizes / heights?

    I am using the code from example 2 – just happened to match my html exactly!

  289. Cees
    20. September 2007 |12:14

    Ok – tested new jQuery 1.2.1 with current Accordion 1.5 – all ok now !

  290. 20. September 2007 |13:46

    I also get a weird jiggle on my accordian in IE 7

    example: http://hondaclassictesting-com.alivedns.com/

  291. Ulrik
    21. September 2007 |13:01

    Hi.
    I’m having problems with your plugin. If I have an accordion with let’s say three blocks that has the heights 300, 20, 100 and I open the one with height 20, then when I open the others they all have height 20 and the rest is hidden. I’m using the settings alwaysopen:false, active:false, animation:’easeslide’

  292. mat
    21. September 2007 |20:43

    Hi, im having the same problem than Ulrik.

    when using the setting “autoheight: true,”, all submenus get the height of the longest item in the menu, but i want it to show only the height that belongs to each item. I’ve tried using “autoheight: false,” but I get the same results than Ulrik.

    example.
    http://asuntosgraficos.dreamhosters.com/acordeon/

    pd. Thanks for the plugin accordion.

  293. Ulrik
    24. September 2007 |23:25

    Update: “alwaysopen:false, active:false” only seems to work if you set animated:false as seen in the demo.

  294. Jack
    25. September 2007 |01:43

    Hi, I like this plugin,but when I use it,I find a proplem,when my content’height overflow the content-div’s,the content can’t be displayed fully in the div,so I want to add a scroll at the content-div,
    I write css:”overflow:auto;”.but it’s not useful!What can I do?Could heple me?

  295. 25. September 2007 |09:10

    hello again –

    I want to use some of the features in jQuery 1.2, and could not get the accordion working with the compatibility plugin… so I decided to change my page over to the version of accordion shown in the UI examples.
    So far so good… but I am having a hard time with the ‘activate’ function.

    I want to emulate your ‘wizard’ functionality, using a form button with the class of “open1″ to open the second panel. My syntax (below) is not throwing errors, but it is also not working – what should I be doing differently?

    $(document).ready(function(){
    $(“#stepForm”).accordion();
    $(‘open1′).click(function(){
    $(‘#stepForm’).activate(1);
    });
    });

    Here is a sample page using this code.
    http://comparemyagent.com/forms/test.cfm

    The text links work fine, but the buttons do nothing.

    I am sure my syntax is all wrong… but I can’t find an example anywhere of using the activate() function with a click on a named element.

    Thanks in advance for any help you can give… unfortunately I have to have this online very soon.

  296. RayDeeA
    25. September 2007 |09:13

    Vielleicht könnte man ja keine Pixel zum Hochzählen der Höhe verwenden, sondern Prozentangaben, also von 0% bis 100% Hochrechnen und die Eigenschaft display:block und overflow:hidden vergeben. Müsste doch funktionieren oder?

  297. Stephen Wong
    25. September 2007 |09:20

    Hi,

    I am trying to nest a menu inside another menu. However the menu does not work, as the menu fails to function after the first click on the nested item.

  298. 25. September 2007 |09:24

    geeeezzz…. I keep doing this, sorry

    as soon as I posted that, I saw the missing dot before the class
    argh… this is what I get for trying to teach myself new code syntax after midnight.

    $(document).ready(function(){
    $(“#stepForm”).accordion();
    $(‘.open1′).click(function(){
    $(‘#stepForm’).activate(1);
    });
    $(‘.open0′).click(function(){
    $(‘#stepForm’).activate(0);
    });
    });

    this works perfectly from what I can tell.
    Thanks again for a great script… and for allowing me to have another conversation with myself in your public space!

  299. 25. September 2007 |19:40

    @Frantisek Malina, Max, Ulrik: I think I’ve got that working in the latest revision.

    @Jack: Can you post an example page?

    @Michael: Alright :-)

    @Stephen: Can you (also) post an example page?

  300. Stephen Wong
    27. September 2007 |08:07

    example page as follows: http://cma.herbal-lemon.net/test2.html

    Try clicking the region names and the country names, the ‘europe’ part won’t function properly; and the ‘america’ part won’t function properly after that (It does when the page is first loaded).

    Thanks for the help!

  301. Stephen Wong
    28. September 2007 |10:04

    I dunno if the following layout is not supported by the plugin?

    header

    item

    example page:
    http://cma.herbal-lemon.net/test2.html

    In the page, the last item will not be properly shown after the header was clicked.

  302. Stephen Wong
    28. September 2007 |10:06

    re: above post

    the layout is:

    .div. header ./div.
    .ul.
    .li. item ./li.
    ./ul.

  303. 29. September 2007 |12:34

    @Stephen: You are applying the plugin to the same element two times, that won’t work. It isn’t enough to specify a different header.

  304. Asle
    29. September 2007 |23:05

    Thanks for a nice plugin. I have two issues.

    - When I mouseover (or click) the menu header the whole list collapses and then expands very jumpy. I want it the selected menu to expand smoothly like the demo.

    - I have a form inside a . How do I get the selected menu to be expanded after I do a form submit?

    - Some of the menu sections are long and some only contain one item. Is it possible for the menu to expand just the size of the selected menu group?

    I have the testcode setup here:
    http://fjklima.no/admin/accordion.lasso

  305. Julia
    30. September 2007 |13:30

    Did anyone try to implement the jQuery Cookie-Plugin by Klaus Hartl (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery)? I’d love to use the Accordion with cookies, this would be really helpful and improve the usability..

  306. Pär Stålberg
    1. October 2007 |15:54

    Hey I love the accordion plugin!

    Im right now in a project that Im using the tablesorter 2.0 plugin. (http://tablesorter.com/)

    And the question came up. Is there a way to use the accordion plugin on a table that is sorted by the tablesorter plugin?

  307. 1. October 2007 |17:35

    I’m working with the menu, but i have a little isse:

    GENEREALIDADES

    Panamá
    Historia
    Cultura

    VISITAR PANAMA

    ¿Donde quiere Ir?
    ¿Que quiere hacer?
    ¿Cómo llevarlo a cabo?

    I want to set the first element as default, but if i use de sintax, active: 0, it doesn’t work.

    Who may help me!!.

    Thanks

  308. 2. October 2007 |12:52

    Hi.

    Ich habe gemerkt das es massive Probleme mit der jQuery Interface Ereweiterung gibt .. gibts hier schon Lösungen? Interface ist eine tolle Erweiterung auf die ich ungerne verzichten möchte.
    Genauso wenig möchte ich auf das hier gut funktionierende Accordion verzichten :(

  309. Alex
    3. October 2007 |17:56

    Is it possible to fix the headings at the very top of the accordion and update the content below?

    Check out this demo to see what I’m talking about.

    http://www.dezinerfolio.com/wp-content/uploads/accordemo/02.html

    Compare that to the previous demo.

    http://www.dezinerfolio.com/wp-content/uploads/accordemo/01.html

    Basically, if you have a lot of content, having the headings at the top is much more usable.

    -Alex

  310. Nuno Mariz
    3. October 2007 |18:00

    Hi,
    The accordion plugin doesn’t work with the latest jQuery(1.2.1) in Internet Explorer 6.
    Anyone have this problem?

  311. pointdev
    4. October 2007 |06:13

    Hi! Great plugin, but I’m having a similar issue as Mat is. I need the height of each section to only grow to the size of the content inside of it, instead of the size of the largest instance. Is there a way to do this?

    Thanks in advance.

  312. 4. October 2007 |15:06

    Thank you for fixing the height calculation.

    One wouldn’t believe it was a missing semicolon.

    Firstly I thought it wasn’t fixed, because I just downloaded the zip package from your site again. Than I checked the last revision in the repository and found it.

    Thank you again

  313. 4. October 2007 |22:45

    Hey, just wanted to let you know that the accordion animations are broken in latest jquery version. I’ve spent a few days trying to get everything to work, got frustrated, then tryed downgrading to 1.1 and everything worked perfectly.

    Please, if you can make your accordion plugin compatible with the latest jquery release it’d really be helpful. Please email me if you need any testing, or if you do release a new version.

    Thanks,
    jack

  314. Asle
    6. October 2007 |01:42

    Hello,
    I wonder if there is a way to tweak the “navigation” so that if the link is contained in the URL, then it would be active. I am not so good at javascript but something like this logic:

    if ‘url’ is contained in one of the menu links:
    - then that menu is active.

    An option for navigation would be in.ex. “p”. I send a from outside the menu and like this: “?p=sales&m=new”. Now I want the menu link that contains “p=sales” to be active. All URLs containing “p=sales” should activate that link.

    I think this is very common. Click on the menu “?p=sales” and after that do some stuff and the “sales” menu is active until I choose another page.

  315. Asle
    8. October 2007 |10:13

    I have a problem where the menu bounces. When I choose another menu option the menu first collapses and then expands. Does anyone see what I am doing wrong? I would like it to move smoothly like the demo.

    Here is the menu:
    http://fjklima.no/admin/accordion.lasso

  316. Asle
    9. October 2007 |09:21

    Hello Jörn,
    Are you busy or is this discussion moved elsewhere?

  317. 9. October 2007 |10:09

    @Asle: Could you give the latest UI accordion together with jQuery 1.2.1 a try?

    About the navigation option: You could just pass the value to check the href against as the navigation option, instead of always checking location.href. That needs a small modification in the plugin, but should give you quite a lot of flexibility.

    @Julia: Not yet. Though I’ve implemented it on the treeview plugin. Porting the serialization to accordion should be easy, I just need to find the time for that.

    @Pär: Would you put the accordion inside a table cell? Or the other way round? In theorey both ways should work, though I wouldn’t expect the tablesorter to sort acccordions.

    @José: Can you post a test page?

    @Alex: Support für Interface gibt es nicht mehr. Andererseits sollte das Plugin mit dem neuen UI Projekt gut laufen.

    @Alex (the other one): Nope, that isn’t possible.

    @pointdev: Could you give the latest revision (see link above) a try?

  318. Florian
    9. October 2007 |15:24

    Hi,

    I’m using the according with flash content. No clue, if this has any
    influence to it but if I open the page with IE7 the accordion is fold
    out. After clicking on the accordion headers it’s starting to work.
    Any idea why is that?

    Please have a look: http://fb-con.lu/t3/index.php?id=9

    thanks
    Florian

  319. Madison
    9. October 2007 |21:16

    I’m having issues with ie6 as well…

    http://www.westga.edu/index_acad3.php

    It does some odd things with styling. Any ideas?

  320. 9. October 2007 |22:38

    Hi Jörn,

    You did a good job it is very useful but I have a little problem with remembering the latest state when it goes to another page, how can I keep it on latest state even a new page loads.

    jQuery(‘#navigation’).Accordion({
    active: true,
    header: ‘#navigation a.current’,
    alwaysOpen: false,
    navigation: false
    });
    You can check the page at :
    http://www.sercotec.net/demo/mtdisplays3/snap_aluminium_15mm.php

    This is current option, I tried many others but it did not work, I will be glad if you help,

    Thank you.

    Serkan

  321. Asle
    10. October 2007 |16:55

    Thanks,
    new fresh files did help on the smoothness of the transitions. I am not able to without help fix the navigation so if any one has the skill it would be nice to have the menu expand if the URL “contains” the same target. I.ex. if the menu link is “?p=sales” and the URL is “?p=sales&id=44&action=detail” then the menu link would still be open even if it is not exactly the same.

  322. 11. October 2007 |23:13

    @Florian: I get a “Object expected” error on that page. The “computer()” call (in body onload) seems to be causing that. You should fix that first. A latest UI accordion a try?

    @Asle: Take a look at line 229:

    var current = this.find("a").filter(function() { return this.href == location.href; });

    You need to modify the filter-callback to match substrings, instead of only exact matches. You could use indexOf() or regular expressions.

  323. Florian
    12. October 2007 |09:39

    Hi Jörn,

    I figured out the problem. I’m using also the page scroll from jquery
    interface elements. Together it don’t work. Maybe you have an idea
    to fix this trouble?!

    thanks anyway

    Florian

  324. 13. October 2007 |12:56

    I have created a 5 tier navigation using accordion, see below;

    http://csgndev.csgnac.co.uk/csgn4/side-nav.php

  325. 14. October 2007 |12:32

    @Florian: With jQuery 1.2+, you don’t need Interface for scrolling anymore.

    @Graham: I can’t really see the accordion in action there. Am I missing something?

  326. 14. October 2007 |15:35

    Yeah sorry, I submitted the post before adding the rest of my post.

    There are 5 tiers to the navigation only the first 3 are displayed and when you click on the 3rd the navigation resets.

    For example;

    Home > News > Archive > 2007 > January

    When you click on “Archive” the nav closes.

  327. Jurgen
    15. October 2007 |10:56

    @Graham: your menu doesn’t expand at all! I use XP and IE7.

  328. Jurgen
    15. October 2007 |13:09

    Great script, and the best accordion script I have seen so far. I spent 2 days on the net trying out all the different ones, but none of them did what I wanted. This one does, which is a variation of the “guiter stuff” example.

    However, how can I use the extra animations from the Easing Plugin? I cannot write javascript myself, so the short usage instructions are useless for me :-(

    I tried changing the line “animated: ‘slide’” into other animations, like “animated: ‘easeInQuad’” but that doesn’t work. I guess I have to add some more instructions somwhere, but I cannot figure it out.

    I’d appreciate someone giving me exact instructions what to add or change. Thanks.

  329. 15. October 2007 |14:36

    Only the “Home” part has anything under it at the moment. If you click that or “News” under “Home” it will expand.

  330. 15. October 2007 |14:37

    @Graham: Okay, I see. I need to experiment a bit with nested accordions, I’ll get back to you.

    @Jurgen: Ok, lets look at how’d you add support for easeInQuad:

    jQuery.ui.accordion.animations.quad = function() {
      this.slide(settings, {
        easing: "easeInQuad",
        duration: 500
      });
    }

    And you can then use it like this:

    jQuery(".selector").accordion({
      animated: "quad"
    })

    You can also use different easings for up and down, and different speeds:

    jQuery.ui.accordion.animations.quad = function() {
      this.slide(settings, {
        easing: settings.down ? "easeInQuad" : "easeOutQuad",
        duration: settings.down ? 600 : 300
      });
    }

    Let me know if you create interesting new animations, I may add them to the plugin.

  331. Horst
    15. October 2007 |15:52

    Hi Jörn,

    is it possible that you expand the items in the other direction (to top).
    An example of what i mean you can find at http://www.siemens.com (this one uses flash)

    thank you, horst

  332. Jurgen
    15. October 2007 |18:20

    @Graham: I see it works fine in FireFox. But in IE7 it does not expand at all. The only thing I see there is the top bar “Home”. Clicking on it changes color, but it doesn’t expand. You may want to check it out in IE7 yourself.

    @Jorn: thanks for your answer, I’ll try it out!

  333. 15. October 2007 |18:48

    @Jurgen: Yeah I use FF, it also works (Apart from the 3rd tier) in IE6.

  334. Jurgen
    15. October 2007 |20:57

    @Jörn: I’m afraid I don’t know where to put the first block… What file? What position? Please forgive my ignorance :-)

    I also noticed that the parameter that is called “active” on the top of the page, is suddenly called “activate” in the examples on the bottom of the page. It took me quite some time to figure out which one was right and and how to use it. “Activate” doesn’t work in my file, but “active” does. Also the examples shown are in another format than the one my file has. By trial and error I found that this works:
    jQuery(‘#navigation’).Accordion({
    active: ‘#menu1′,
    });

    This stuff is rather confusing for webdesigners like me, who are not that capable in the coding department. So some general info on how to use both ways of scripting would be handy I guess.

  335. Jurgen
    15. October 2007 |21:58

    How does the “speed” option work? Whatever number I use, the speed of the animation remains the same. I have this in my file:

    jQuery(‘#navigation’).Accordion({
    active: ‘#menu6′,
    header: ‘.head’,
    navigation: true,
    event: ‘mouseover’,
    autoheight: true,
    animated: ‘slide’,
    speed: ’5′
    });

  336. Horst
    16. October 2007 |08:39

    Hi
    hm, posted a question yesterday but it is gone :-(

    my question was if its possible to alter the accordion that it expands from bottom to top. As an example: http://www.siemens.com (This on is made in flash indeed)

    Would be happy getting some response.
    Thank you
    Horst

  337. 17. October 2007 |09:53

    @Horst: Nope, currently not. Though you are free to give it a try yourself.

    @Jurgen: Just put the first block somewhere in front of your document-ready code, after the accordion plugin has been loaded. It adds functionality to the library and must be present before calling the accordion.

    You are mixing the active-option and the activate method – right, those names are confusing. Anyway, just pass the active-option to the accordion plugin and all is fine.

    The speed option doesn’t exist anymore, my fault in not correctly updating the documentation. You can customize the speed by using custom animations like mentioned above. Just replace the value for duration (in milliseconds) with something you like.

    The intention of that approach is to offer resuable animation sets instead of custom stuff everywhere. You can post your favorite sets by posting a snippet like the one I’ve posted above.

  338. ben
    17. October 2007 |10:10

    Hi there,

    Great bit of code; thanks!!
    Trying to hide the selected item on mouseout; any tips on how to do this?

    Ben

  339. Horst
    17. October 2007 |12:41

    Hi Jörn,
    it’s quite easy to make your accordion act from bottom to top.
    Gave it a try and you just have to fix the accordionContainer with css positioning.

    in my case:
    #nav {
    position: absolute;
    bottom: 20px;
    left: 20px;
    }

    so, with this you have fixed the bottom position and it expands upwards – should have thought about this before ;-)

    thank you – it’s just a great script
    Horst

  340. lx
    17. October 2007 |18:11

    Hello Jörn,

    is your accordion script going to be implemented into the official UI-extension of jquery? Guess, i’ve read something on their plug-in-site … ? If so, when a release can be expected? It would be really cool, if your script would be running with the latest jquery release.

    As for now, i’m using the version, that i found in your download. However, i’m still in trouble with the height issue, although some other users confirmed the fixing of the problem by using the files from the repository. Actually, when downloading those files and implementing them into my site (local only at the moment), it’s not working at all.
    Am I missing something?

    Best regards and thumbs up for your efforts anyway,

    Alex

  341. 18. October 2007 |16:32

    @ben: You could add the mouseout event to the accordion container element and use the activate method to close it. Something like this:

    $("#accordion").accordion().mouseout(function() {
      $(this).activate(-1);
    });

    @Horst: Thanks Horst, great to see its so easy. I’ll add that to the demos.

    @lx: Actually the accordion is already part of jQuery UI. Though the first release didn’t went that well, but as soon as 1.1 is out I’ll state that here more prominently. I’m not sure yet what to do with this page.

    Anyway, the latest revision should work now with jQuery 1.2. Its not 100% compatible with the 1.5 release anymore: You have to specify the header option if you don’t use an anchor (“a” element) as the header. Otherwise it should work fine.

    Let me know if it doesn’t.

  342. lx
    18. October 2007 |17:49

    Maybe it’s necessary to make this more understandable for the people. Your two accordion scripts can be easily mixed up, especially when you follow the link at the bottom of the UI/Accordion-page (–> http://docs.jquery.com/UI/Accordion –> “A few demos”), for this refers to your “old” script from this site and it seems to use a slightly different structure, doesn’t it? At the moment I’m using a structure rather than the documented structure.

    jQuery(‘#acc1′).Accordion({
    header: ‘.title’
    });

    Is this still possible or is the UI version restricted to the latter one? And by the way, is there any difference between those structures anyway, when using them within the accordion?

  343. lx
    18. October 2007 |17:52

    Oops, I’ve put the tags in brackets, thus they disappeared. I meant, at the moment I’m using a DIV structure rather than the documented UL + LI structure.

  344. Colleen
    18. October 2007 |21:08

    I have checked out the latest version from svn and it still does not have variable height on the content elements. It always gets the height of the first element opened and applies that to all of the other content elements. Did this get broken again in the latest release? It seems some people got it to work at some point.

  345. Colleen
    18. October 2007 |21:34

    I figured it out. I was not including the easing and dimensions js files. Once I included those, my content elements were displayed at the right height.

  346. 20. October 2007 |14:50

    @lx: Once jQuery UI 1.1 is out, I’ll deprecate this “standalone” version. Until then, both are very similar. If you use the UI version, you have to specify the header option if you are using something else then an a-element as the header. Otherwise there is no notable difference. The latest revisions for both are now the same.

    @Colleen: Ok, great :-) I’ll make sure to update the documentation once jQuery UI 1.1 is out.

  347. Ad
    22. October 2007 |10:57

    I’ve just tried version 1.5 of the accordion but the autoheight function just doesn’t work proper at my project so I’ll keep on using 1.4 because it works fine, except on one issue.

    When you use the menu in FireFox it works fine! But when you use the menu in Internet Explorer the whole menu collapse for just half a second and opens the right submenu then. That’s really annoying when you are navigating trough the menu.

    Does anybody know how I kan solve this problem?

    This is how I activate the menu:
    jQuery(‘#navigation’).Accordion({
    active: false,
    header: ‘.head’,
    alwaysOpen: false,
    showSpeed: ’0′,
    navigation: true
    });

  348. Arjan
    22. October 2007 |12:38

    Seems that Accordion is not working with jQuery 1.2.1????

  349. Stuart
    22. October 2007 |18:53

    Hi – Having problems getting this and jQuery 1.2.1 working together. I am running this with jQuery UI for tabs…

    Please advise,

    Regards,

    Stuart

  350. 26. October 2007 |16:56

    thanx for your great work!

    is it possible with accordion plugin to have alternate colors for the header rows (zebra style)?

  351. lx
    27. October 2007 |19:53

    Hi,

    I’ve got the UIaccordion version running with the latest jquery release. However, I’m getting into troubles, when placing flash content inside and viewing with Firefox 2.x. When collapsing, the flash content appears on top of anything else. No such problem in IE, though. Any chance to avoid this behaviour?

    Best regards,

    Alex

  352. 28. October 2007 |20:46

    @Ad, Arjan and Stuart: Please give the latest revision a try if your are using jQuery 1.2.1.

    @mimmo: You can do that just fine using jQuery. See learningjquery.com for some stuff on alternating tables. The same stuff can be applied to any other element.

    @lx: Could you post an example page for that?

  353. Chillosophy
    30. October 2007 |01:57

    I use an accordion in a navigation menu. The content page is an iframe, so every link in the accordion is targeted to the iframe. Everytime I click a link the accordion closes, even if alwaysOpen or autoheight is set. Is there a way to prevent this?

    I’ve made a basic testcase page here: http://dev.chillosophy.nl/test.html

    If I click any link in the menu, I don’t want it to close.

    Aside from this; great work on accordion, I love it :)

  354. lx
    30. October 2007 |12:09

    Hi Jörn,

    I’ve put a sample page online now. Please check out http://www.plaintype.com/uiaccordion_test/

    I’ve set a height attribute for the div with the flash content. Otherwise, the accordion even doesn’t expand. I seems as if the script doesn’t detect the flash content height.

    Regards,

    Alex

  355. lx
    30. October 2007 |12:27

    By the way: when viewing the page on a Mac with Safari 2.x, the accordion behaves just strange. When first loading the page, it’s not working at all. After clicking a few times on the headers, it starts “working”, but then again it hangs a few clicks later.

  356. didou
    30. October 2007 |17:00

    Same issue with IE7. Menus are expanded and no effect.
    No success with nightly build of jquery on 30/10/07.

  357. Pet
    1. November 2007 |14:01

    Hi Jörn,

    The accordion is great, and I’ve added the squeezebox plug in you recommended to allow more than one element at a time,

    however I’m having problems collapsing all the elements.

    jQuery(‘#details’).activate(-1);

    That line of code gives me an error “t has no properties”, “t = t.classname || t”

    I’m fairly new to jquery and javascript so I’m having trouble finding out what’s causing this.

    Pete

  358. 1. November 2007 |17:52

    @Chillosophy: You need to give the accordion an indication on which part of the accordion it has to open. You can do that either by adding a class “selected” to the current element, or use the activate-method to do that via JavaScript. Or use the navigation-option, but that works only when the location matches the link, that won’t work with your current setup.

    @lx: The behaviour in Safari 2.x must be fixed in jQuery itself, John is working on that.
    For the flash content: I have no idea. Most likely jQuery isn’t able to handle the flash content correctly, I don’t know what I could do about that in the accordion plugin. Could you post the to jQuery’s dev list?

    @didou: Testpage?

    @Pet: I haven’t updated the squeezebox plugin for a long time. Looks like the activate-method is broken. Currently I can’t offer any support for that, it was never released anyway.

  359. Victor Chen
    2. November 2007 |06:46

    Has anyone figured out how to get Accordion 1.5 to work with Jquery 1.2.1?

    I simply added the latest Jquery 1.2.1 file to the demo provided above and you can see that the first example breaks.

    What is the simple fix to keep the autoheight working?

    Thanks,-v

  360. 2. November 2007 |19:23

    @Victor: Please give the latest revision a try.

  361. lx
    2. November 2007 |21:03

    @ Jörn:

    I’ve added the flash issue to the developers list. Let’s see…

  362. Asif Kilwani
    3. November 2007 |21:38

    It gives error if out of all when one don’t have sub , how can i manage that one?

    Also whoever has more links the height of other become some. Can’t it auto adjust the height as per the total sub links height?

  363. 5. November 2007 |03:09

    @Asif: Give the latest revision a try and set autoheight:false.

  364. didou
    5. November 2007 |10:30

    @Jörn: Here’s a sample page I wrote, I’ve downloaded the nightly build of 04 nov. 2007. but I still have the issue on IE7.



    .xerror, .error { display: none }

    jQuery().ready(function(){
    // simple Accordion
    jQuery('#nav').Accordion({
    active: false,
    alwaysOpen: false,
    showSpeed: '0',
    navigation: true,
    });
    })

    Header 1
    Content 1.1
    Content 1.2
    Content 1.3
    Content 1.4
    Header 2
    Content 2
    Header 3
    Content 3
    Header 4
    Content 4

    Hope this helps, thanks.

  365. Robert Henniger
    5. November 2007 |23:06

    Hi Jörn.
    Danke für dieses schöne Plugin.
    Es funktioniert einwandfrei im Firefox.
    Im IE 7 habe ich jedoch im Moment ein Problem.

    Ich bekomme immer einen Fehler in Line 907.
    Habe andere builds der jQuery probiert jedoch ohne Erfolg.
    Die Stelle im JS Code bleibt jedoch bei jedem Build die gleiche.

    Es handelt sich um folgenden Abschnitt in der jquery.js:

    // IE actually uses filters for opacity


    name = name.replace(/-([a-z])/ig,function(z,b){return b.toUpperCase();});
    if ( value != undefined ) elem[name] = value;
    return elem[name];

    Vielleicht hilft das ja!?
    Leider kann ich die mitgelieferte jquery nicht nutzen da sie mit meinem Datepicker nicht funktioniert :-)
    Ich habe auch die letzte version aus dem SVN gezogen…

    Grüße, Robert

  366. Robert Henniger
    5. November 2007 |23:52

    Noch eine Anmerkung:
    Wenn ich die Optionen
    active: false,
    alwaysOpen: false

    nutze kann ich die Panels auf und zu klappen jedoch kein “fremdes” Panel schliessen.
    Ich vermute der Fehler tritt beim “schliessen” eines Panels auf.

    Gruß Robert

  367. Matt Poje
    7. November 2007 |16:21

    Hi Jörn,

    your plugin is amazing and I appreciate the nice work! However, I am trying to add some customized behavior to the drop down sections with no luck. Here’s my scenario:

    header1
    - sub1-1
    - sub1-2
    - sub1-3

    - sub1-15

    header2
    - sub2-1

    - sub2-9

    header3
    - sub3-1

    - sub3-20

    (so, you get the picture: variable length sub lists)

    I am trying to set the .height() of the drop-down area dynamically to be the full height of the items or the height of the first 10 items only – whichever is less. (In the case where I limit the size of the sub container, I am adding an overflow: scroll.)

    I am able to iterate through the those children elements when click is fired, however the height property of those items always returns 0 – I presume b/c they are still display: none when it is fired. Is there a way I can do this after the Accordion has activated a section BUT before it animates it down?

    Thanks for any tip you can provide.
    -Matt

  368. 8. November 2007 |01:31

    @didou: No, that doesn’t help. Please post a link to a running example of your setup.

    @Robert: Auch hier gilt: Ohne Testseite kann ich nicht wirklich weiterhelfen.

    @Matt: Instead of setting the height on click, you should set the height before initializing the accordion.

    And you need the latest revision together with autoheight:false.

    jQuery is able to calculate height of hidden elements with some fancy tricks, but it may be a bit limited, eg. for what I know you can’t calculate the height of an element whose parent-parent is hidden.

  369. 8. November 2007 |05:21

    Hi, This is an awesome plugin, however I’m having an odd issue.

    http://www.hyperspark.co.nz/projects/winery-tour/dates.php had the accordion plugin. The problem is that it stops working after on click. i’ve noticed that if I click another header item it sets the height of the open content to zero (i used FireBug to inspect the element).

    Do you have any tips/solutions to get this to work correctly?

    Thanks in advance,
    D

  370. 8. November 2007 |08:20

    Hi, great work there!

    Just a strange bug here that I can’t wrap my brain around..

    my initialiser is:

    $(“#elists”).Accordion({header: ‘div.head’, active: false, speed:500, autoheight: false});

    and the problem is that the height of each opening boxes is only as high as the first one I opened. So if the first one only had 2 items and another one has 50, well only 2 are shown.

    My guess is I have some conflicting css properties overvall but hey.. i’ll spare the current headache I have with this and see if you might know what I’m talking about!

    Thanks.

  371. 8. November 2007 |14:48

    I used this great plugin on http://www.kwaliteitinklantcontact.nl for the menu. It works smoothly in IE7, Netscape, and FireFox. But in IE6 it’s not as smooth as in the other browsers. What can be the problem, and is there a solution?

  372. Anthony
    8. November 2007 |17:21

    Hi again,

    I found a simple solution for myself for an accordion style list with jquery basic effects.

    Thanks.

  373. Stefan
    13. November 2007 |18:02

    Hi Joern,
    i try using accordion with latest jquery 1.2.1 release.
    basically it works but autoheighting and slide animations are looking
    kind of broken. Which version of jquery are using? Do plan any updates?

    Thanks, your accordion is great anyway
    stefan

  374. 14. November 2007 |21:28

    @Darren: Could you provide a demo page which actually uses the accordion? Just something that replicates the issue.

    @Jurgen: Could you clarify “smooth”? Are the animations not smooth enough? Or something else?

    @Stefan: Could you give the latest revision a try?

  375. 14. November 2007 |22:25

    I am having a problem with ie7. It is giving me a Line: 723, Char: 30 when I try to mouseover the top item. Basically, it works fine when i first mouseover (DOWN), then i mouseover up and it works fine on the 2nd 3rd items (ie. the parcel 1 and 2), but when it hits the first item “Regional Geology”, it gives me that js error, and it doesn’t open?
    I’m lost, not sure what the problem is, seems to only happen in ie7, and it seems to be tied to the height, ie. I changed in the jquery.accordion.js file “toHide” to “toShow” which helps with the actual height differences, but it also seems to cause the ie problem, because with this set to the default “toHide”, I don’t get the error.
    Any help would be greatly appreciated.

  376. Stefan
    15. November 2007 |14:19

    Hi Jörn,
    today i downloaded your latest accordion.zip then unzipped everything
    to my apaches document root. the test page was working fine.
    But then i exchanged the jquery.js from the zip with the latest jquery version 1.2.1 from http://jquery.com and i had the same strange animation
    effects like before. Why are you using a customized jqeury version? Or is it just an older release and if so which one?

    Greets
    stefan

  377. Gerhard
    16. November 2007 |21:09

    Huhu,
    kann es ein, dass die aktuelle Version fehlerhaft ist? Hohe DIVs werde abgeschnitten, wenn am Anfang ein flacherer kommt.
    Ich bitte um eine kurze ANtwort
    Danke Gerhard

  378. 17. November 2007 |11:54

    @Jörn: Yes, the animation is not smooth on IE6. It shows a flickering, restless animation and the speed is faster, like the animation is done quickly several times after each other before finishing. My client hasn’t complained yet, but that is because he uses IE7 (I know). But sooner or later he will bring it up, and besides, I would like to have it running smooth in IE6 too. I’m not that happy having delivered a site to a client with a menu that is not working as it should be for all visitors… So I hope there is a solution, because I love the effect and script!

  379. 18. November 2007 |01:46

    Das plugin ist sehr nuetzlich, gratulation!
    Eine Eigenschaft ist etwas verwirrend, die Funktion “activate”. Es scheint als rufe sie das ‘click’ Event auf. Wenn ein Accordion als Navigations Menu benutzt wird und ein click irgendwo in der Seite das offene Menu aktivieren soll bewirkt das ein Schliessen des Accordions anstatt es offen zu lassen. D.h. es ist kein eigentliches Aktivieren, sondern mehr eine toggle Funktion. Waere schoen wenn das Aktivieren in jedem Fall funktioniert.

  380. Asle
    18. November 2007 |23:58

    Hi,
    I am trying to get the navigation to read only the URL without the ending “?…” To get navigation to trigger the correct menu I would like both these to open the “products menu”:
    - example.com/products/
    - example.com/products/?id=453

    I believe there is something in the “Accordion: function()” part of the script but I am not good at regex. How would you get it to filter out the active URL to remove the questionmark (?) and everything after that?
    And also – what about the ending “/” before the ?. What if it is missing?
    Hope I am clear as to my problem.
    Thanks,
    Asle

  381. 19. November 2007 |07:37

    Jorn,

    have been doing some dynamic things with accordion and have found
    some areas that don’t work. After some rather extensive debugging it
    appears that the problem lies in jQuery.

    I’m doing some very dynamics things with the content that lives in the
    accordion. The problems I’ve found seem to stem from accordion
    getting out of sync with the changes that are made to the data after
    accordion is called and setup. I haven’t unraveled why the problems
    are happening yet but it appears that jQuery is cacheing hide/show
    values.

    I have provided a sample page that demonstrates one of the problems I
    have found with accordion and my tecniques.

    Example of broken accordion:

    Works 1st time and then broken until refresh of page.
    http://dataprism.net/dpui/test2.html

    Click on “Open Inspector” to open the inspector pane and use the
    accordion, it works great.

    Click on “Close Inspector” to close the inspector pane.

    Now click on “Open Inspector” and the accordion is broken. Page
    refresh fixes it.

    When I open the inspector I dynamically build the html that will be
    accordioned and call accordion.

    When I close the inspector I empty the accordion data, as the next
    time the inspector is opened it may be inspecting a different object.
    The accordion seems to get out of sync with the new data.

    I changed the code to completely remove all traces of accordion when
    closing the inspector and then reloading accordion when I open the
    inspector. The same problem occurs, leading me to believe there is
    some sort of bug in the jQuery hide/show code.

    Any help would be greatly appreciated.

    Thanks,
    ml

  382. 19. November 2007 |09:23

    Jorn,
    Got it figured out.

    unaccordion() must be called before using accordion() again. Otherwise the original clickhandler is not unbound and two clicks come in to accordion and confuse it.

    I now call unaccordion() when finished with the dynamically loaded forms that I’m using accordion with. Works great.

    That was pretty tough to track down.

    Thanks for the great work!

    Cheers,
    ml

  383. Stefan
    19. November 2007 |16:21

    Thank you.
    This version works fine jquery 1.2.1.
    http://dev.jquery.com/view/trunk/plugins/accordion/

    Thanks
    Stefan

  384. Rob Elsner
    19. November 2007 |17:25

    Awesome plugin, but I’ve found one problem:

    Using jQuery 1.2.1 with the following HTML

    Commands by Rack

    Commands by IP

    Starting IP:

    Ending IP:

    I get an Invalid Argument thrown by IE6 on line 906 of jquery.js … Debugging, the “name” parameter to the elem array is “” which is why the exception is thrown, but I don’t know why name comes as empty string.

    Disabling animation fixes the problem until I can find more time to see why.

  385. Maniquí
    19. November 2007 |20:12

    Hi Jörn,

    what could affect the plug-in performance? (I mean, the slideUp/slideDown animation).
    Your demo works pretty smooth here in FF/Linux, FF/Win, IE6/7.

    But when I try it in a site I’m working on, it runs slow, and not smooth at all.
    Although both the HTML/CSS code I use are valid, and always try to follow best practices, the structure inside each accordion chunk is rather complex, It seems that certain combinations of HTML/CSS can make accordion run slow.

    I know I should provide a live example. I don’t have one currently.

    The question is if you actually know HTML/CSS factors (like too many floats inside an accordion chunk, or maybe some CSS trickery, like clearing floats with overflow:hidden) that can slow down the performance of the accordion slideDown/Up effect.

    That’s all, thanks and thanks for this plug-in.

  386. 21. November 2007 |13:49

    Thanks for this fine PlugIn. I gave the last version, but there seems to be a problem with the calculating of the list-heights. This problem apears in FF/Safari (not in IE6/7) when a list contains a listelement with space an the option is set to autoheight:false. In this case the list is filled with unnessecary space behind the last listelement.
    Maybe the calculation of the heights is wrong.

    For more information have a short look at my testpage:
    http://www.fromustoyou.de/externdownloads/sandbox/accordiontest/

  387. 21. November 2007 |13:52

    i meant: i gave the last version (svn) a try. ;o)

    Thomas

  388. pete
    22. November 2007 |00:08

    Hi Jörn,

    I’ve been changing the contents dynamically, much like Mark on 19 November 2007. My version is Accordion 1.5 and jQuery of 2007-09-18 rev 3387.

    I inserted new html into a with code like
    $(‘#panel1′).html(‘<a>…’);

    However, this panel remains open (and for each panel changed). The activate(-1) method could not close it (even with alwaysOpen: false).

    I don’t know how Mark did ‘unaccordion()’. Where is it defined?

    Keep up the good work!

  389. 23. November 2007 |15:45

    I’ve solved the problem. There is a need of additionally code for the case that the option is set to autoheight:false.

    For more details use the link two posts above.

    @Jörn: Maybe this little codesnippet will added permanently to the next plugin revision?

  390. 26. November 2007 |18:19

    Hi I’m getting the same problem as Robert Henniger, the if ( value != undefined ) elem[name] = value; code in teh attr section of jquery,

    My jquery code
    $().ready(function(){

    // second simple Accordion with special markup
    $(‘#navigation’).Accordion({
    active: true,
    header: ‘.head’,
    navigation: true

    });

    // bind to change event of select to control first and seconds accordion
    // similar to tab’s plugin triggerTab(), without an extra method
    jQuery(‘#switch select’).change(function() {
    jQuery(‘#navigation’).activate( this.selectedIndex-1 );
    });
    jQuery(‘#close’).click(function() {
    jQuery(‘#navigation’).activate(-1);
    });
    jQuery(‘#switch2′).change(function() {
    jQuery(‘#navigation’).activate(this.value);
    });
    });

  391. 27. November 2007 |09:43

    @Todd: Testpage?

    @Stefan: Even if the version number isn’t there (I’ve now started to avoiding that), you can still take a look at the revision. If its older then the one from 1.2.1, its an older version.

    @Gerhard: Das ist ein bekanntes Problem und in der letzten Revision behoben, ein neues Release kommt bald.

    @Jurgen: I couldn’t replaicate issues with the animations themselve yet, though there is some flickering, most likely some collapsed padding/margin issue. I’ll look into it.

    @Juerg: Bei einem alwaysOpen:true accordion lässt es sich garnicht schließen, damit würde activate auch nicht mehr als toggle arbeiten. Löst das dein Problem?

    @Asle: Building the correct regex is one thing, using it to match the location another. I’ll try to tackle the latter.

    @Mark: Good to know you got it figured out. Please note that the current unaccordion implementation is very basic, it just removes all event handlers on itself and its descendants. That’ll work as long as you don’t add other stuff there – it sounds like you are replacing everything anyway. I’ll try to improve the unaccordion implementation.

    @Maniquí: You can use Firebug to profile your page, that may help.

    @Tomasz: I’ll take a look at it. If I can reproduce the problem I’ll add your patch. Thanks!

    @peter: The latest revision provides an unaccordion method. So after you’ve modified the accordion content, reinitiliaze it with $(…).unaccordion().accordion(…);

    @Drew: Testpage?

  392. 27. November 2007 |11:37

    http://www.simpledev.co.uk/eu/whoweare/people.cfm

    If you hit the red button it errors but in firefox its fine

  393. 27. November 2007 |18:32

    @Drew: Could you give the latest revision, soon to be replaced by a 1.6 release, a try?

  394. Brian
    27. November 2007 |18:40

    Is it possible to nest an accordion within an accordion? I can’t seem to get the second accordion to work, it displays but there is no accordion action.

  395. 27. November 2007 |18:42

    I tried the latest version of the accordion.js file but it didn’t change at all, was this the file you meant?

  396. 28. November 2007 |21:29

    I was wondering if this kind of menus are SE friendly. I m trying to find a good looking and SEO friendly menu and sometimes i ask my self “why i should always avoid javascripting with my menus?”

    overall this time, jquery is really cool. So i hope its ok with it, if not please tell me.

    regards

  397. Nick
    29. November 2007 |05:55

    Can someone help? I’m using the accordian menu with the easeslide…. and I have a menu with four items in it. I have the first item open on page load.

    Every 1 out of 3 or 4 time I load the page, the bottom three items fall off the page when loaded, leaving only the one opened item. Has anyone else had this problem? This happens in Firefox and Safari for me… Any idea how to solve it? Here’s what I have for the javascript…

    jQuery().ready(function(){

    // second simple Accordion with special markup
    jQuery(‘#navigation’).Accordion({
    header: ‘.head’,
    navigation: true,
    active: false,
    event: ‘mouseover’,
    autoheight: true,
    animated: ‘easeslide’
    });

    jQuery(‘#navigation’).activate(0);

    });

  398. 30. November 2007 |11:10

    i want to provide a navigation UI two levels deep (simple nested lists). but i doesn’t work. by klicking the list containing the deepest list elements the parent list will closed.
    Is there a workaraound for a two level accordion?

  399. Johan
    1. December 2007 |15:06

    All works fine though I get this notice in my debugger

    $.Accordion.Animations[settings.animated] is not a function
    [Break on this error] down: down

    I have not set this option.

  400. Pete
    3. December 2007 |11:56

    Jörn,

    Is it possible to find out if an element is active, using something like -

    if (jQuery(’#accordion’).element(x).value == active) {

  401. Brian
    4. December 2007 |00:02

    I just realized that it is possible to have nested accordions. The problem I am running into is that the second accordion is built on the fly when the page loads. The page is reading in the items from XML but it is not collapsing like it should. The items are formatting correctly based on the CSS but there is no accordion functionality. I am new to jQuery so I am quessing I am doing something wrong with jQuery and that the plugin is not the problem. Is there an order that I need to do this so that the dynamic accordion will function correctly?

  402. Brian
    4. December 2007 |18:03

    Nevermind my above questions, I got it working now.

    Now, any idea why this won’t work in a Vista Gadget with the latest version of jQuery (1.2.1)? It will work with jQuery 1.1.2 or earlier.

    By the way, thanks Jörn for such a great plugin.

  403. 4. December 2007 |20:18

    @Brian: So far nested accordions are not officially supported. It sometimes works, but often the dynamic inner heights screw up the outer accordion. It would be great if you could provide an example of a working nested accordion.

    I can’t say anything about Vista Gadgets, sorry.

    @Virtual Numbers: Considering that it falls back to plain HTML and text when no JavaScript is available (eg. Google bot), without hiding anything, it should be pretty good for SEO. I don’t have any numbers though.

    @Nick: Using both the navigation option together with an activate-call right after the accordion initialization seems like a potential problem. You should remove one of those two. If that doesn’t fix anything, please post a testpage.

    @Thomas: There is no support for nested accordions yet. I’d be happy to change that if someone provides a good example.

    @Johan: Testpage?

    @Pete: You can check the header element for the selected-class or check the display value of content elements (display:block, active, display:none, not active).

  404. 7. December 2007 |00:05

    First, great plug-in. Took me a little while to get it working, but once I got past that part it is great.

    One thing I can’t seem to get working though is the height of the menus when expanded. Is there a way that each expanded <dl> can be the height of the enclosed content.

    Have tried autoheight: false and autoheight: true, maybe I’m just missing something that is obvious.

    Thanks.

  405. David
    7. December 2007 |10:41

    I’m having animation problems with an accordion with nested tables in IE7. Using ‘slide’ causes the accordion contents to flicker twice. If animation is turned off all is fine.

    Has anyone else come across this issue; is there a known workaround?

    I don’t have access to a webspace ATM, but do have a page that demonstrates the issue: I can mail it if required.

  406. designerno1
    7. December 2007 |15:48

    Hello, nice script.

    i tried to change the speed, but nothing works.

    how can i change the speed of the accordion.

    please help me

  407. 11. December 2007 |15:39

    Could be this script modify in the way to set CSS style after finish NOT e.g.

    <ul class="sub" style="overflow: hidden; height: 142px; display: block;">

    BUT

    <ul class="sub" style="overflow: hidden; height: auto; display: block;">

    Because I want to do accordion in accordion and due to actuall work of script it is not possible.

  408. Harry
    19. December 2007 |21:47

    @Cees – Making the print output display all content was important to me as well and found the following css rule did the trick for me (I’m using a definition list/DL for my accordion):

    @media print {
    dd { display:block!important; height:auto!important }
    }

    I think the “!important” is key to overriding the javascript-added display:none.

  409. 20. December 2007 |18:16

    @Phil: There is an undocumented option “fillSpace” in the latest revision. As long as your content elements don’t have any padding (put it on nested elements when needed) it should work fine. You can use either fillSpace or autoheight.

    @designerno1: You have to provide a custom “animation”. Something like this:

    $.accordion.animations.myStuff = function(settings) {
      this.slide(settings, {
        duration: 800 // < - speed
      });
    }
    // usage
    $(...).accordion({
      animation: "myStuff"
    });

    @Jirka: There is an option clearStyle in the latest revision, which removes the overflow and height styles. Though nested accordions are still unsupported.

    @Harry: Thanks for the snippet. I'll add that to the plugin's css file.

  410. a9
    26. December 2007 |23:05

    I also had a problem getting it to work with IE using jquery 1.2.1

  411. adam
    28. December 2007 |13:49

    i just upgraded to the latest version of the accordion and i’ve lost access to the .change event that it triggered. i had been using it to ajax in content and put it in the accordion div, which had been working fine in the old revision i had, from late august. now, i can’t even tell if my dimensioning issues are solved because my old code is not longer working. can you offer any insight as to how i can now access the newContent object?


    $(".monthcontainer")
    .each(function() {
    if (typeof arguments.callee.count != "number") {
    arguments.callee.count = 1;
    }
    else {
    ++arguments.callee.count;
    }
    var mycount = arguments.callee.count;
    $(this).addClass("called_"+mycount);
    })
    .accordion({
    header:"div.monthly",
    active:false,
    alwaysOpen:false,
    fillSpace:true,
    clearStyle:true
    })
    .change(function(event, newHeader, oldHeader, newContent, oldContent) {
    var classes = this.className;
    var called = classes.split(" ")[1];
    var i = called.split("_")[1];
    var catcher = newContent[0].id;
    var j = catcher.split("_")[1];
    var l = oldContent[0];
    var period = newHeader[0].id;
    if (i===j) {
    /*
    $(l).css({
    display:'block',
    width:'100%',
    height:'50px'
    })
    .block("<div class='waiting'>Fetching Days<img src='../img/loading_blue.gif'/></div>");
    */
    $.get("hedge_cost_ajax_totals.cfm",{period:period},function(data){
    newContent[0].innerHTML = data;
    $("##receptacle").append(data);
    var h = $("##receptacle").height();
    $("##"+catcher).height(h);
    });
    }
    });

    thank you very much.

  412. Elaine
    28. December 2007 |20:45

    Thank you for sharing this fantastic script. :)
    I am wondering if there is a way to expand more than one item at a time so that you can expand, say two items out of five from a list?
    Hope this isn’t too basic of a question, I am still pretty new at this. Thanks again.

  413. adam
    29. December 2007 |02:24

    never mind about that………..sometimes hours and hours of coding lead to strange strange things at times

  414. Stephan
    4. January 2008 |01:14

    First of all, thanks for that great plugin!

    But there is something that i don’t understand. Somehow, links are not working in the “content” area if you use the div tag to seperate “headers” and “content”… For a sample, just open your demo file and add a link in the Divitus structure example in the text under “baseball”

    That is so strange…

  415. 4. January 2008 |02:52

    Hi there,

    First off this is a great script thanks so much for taking the time to do all this. Anyways to the point, the menu keeps bouncing up and down one the mouseover and i can seem to get the auto height to work. Is there a way to anchor the height so that it does not do this. Thanks again!

  416. Martin
    4. January 2008 |10:42

    Hi there. I was suffering from an IE7 specific problem when using the clearStyle setting set to true, and event set to click. The list was an ordinary ul with li’s, and anchors for headers.


    $("#rightcol .nav").accordion({
    event: "click",
    header: "a.head",
    active: "#current",
    selectedClass: "active",
    clearStyle: true,
    animated: "slide",
    alwaysOpen: false
    });

    What happened was that when you clicked an item in the menu it would expand it's children as expected, but if you were to click another header it would not expand it's children and close the collapse the other item, but immediately follow the href along with a javascript error in the console.

    To fix this problem I edited the the jquery.accordion.js file, on line 134 (height: ""). I removed this line and replaced it with clear: "both" and it appeared to fix the problem.

    Hopefully this will help anybody suffering from the same difficulties.

  417. 8. January 2008 |21:49

    There are some serious problems with this plugin in ie7.

  418. Paul
    9. January 2008 |01:27

    I’ve got three unique-named imagemaps that I’m trying to integrate into your accordion plugin (great job BTW) with three selects, one per map….

    Map 1

    Map 2

    Map 3

    Works great in Firefox, but only works in the first accordion select in IE 7. When I try the other selects, I get a Code: 0 Invalid Argument error from IE 7.

    Thus far I’ve tried nearly every possible suggestion from said comments on this page, including – including the map area within the content containing tags () with absolutely no luck… any ideas?

  419. Tom
    9. January 2008 |12:34

    Hi, great plugin, but have a little issue with IE7+Vista…. when my webpage loads up, the user sees a very quick flash of the expanded content, before being hidden. Every other browser/os combination is fine. Anyone else have this problem? Is there a quick fix for it? Thanks

  420. Derik
    10. January 2008 |19:17

    I would like to say thank you for the great plugin.

    Unfortunately I’m having an issue right now that I hope you might have the answer for. I believe this might be the same problem that Stephan was mentioning in his January 4th post.

    I’m using your plugin for a navigation column. the code looks something like this.

    about us

    Our Policy
    Our Founder

    media

    Video
    Photos

    This is kinda like the code you have for one of your demo’s and everything works great when the EVENT option is set to ‘mouseover’. But if you change the EVENT option to the default ‘click’, which is what I would like to use for this navigation, the links no longer work. The accordion works just fine and it opens up to dispay the sub links, but you can’t click on those sub links and be directed to the appropriate page.

    So I was wondering if you have ever came across such an issue or maybe have a quick resolution for the problem. I appreciate your time.

    Thanks,
    Derik

  421. Derik
    10. January 2008 |19:31

    I apologize but this is the code snippet for the example in my previous post. I forgot to use code tags and < >. Thanks again for you help


    <ul>
    <li><a href="#">about us</a>
    <ul>
    <li><a href="ourPolicy.html">Our Policy</a></li>
    <li><a href="ourFounder.html">Our Founder</a></li>
    </ul>
    </li>
    <li><a href="#">media</a>
    <ul>
    <li><a href="video.html">Video</a></li>
    <li><a href="photo.html">Photos</a></li>
    <ul>
    </li>
    </ul>

  422. Santiago
    13. January 2008 |21:04

    Hi, i’m using flash content inside accordion plugin, but when set the accodion to active the flash appears blinking…

    Sorry my english.
    Any help?

  423. Santiago
    13. January 2008 |23:49

    Using

    defaults: {
    selectedClass: “active”,
    alwaysOpen: false,
    active: false,
    animated: ‘easeslide’,
    event: “click”,
    header: “dt”,
    autoheight: false
    },

    Only Blinks when the Flash content is hiding…

  424. 14. January 2008 |12:50

    Hello,
    I am not able to correclty show the scrollbars where required. I tried with the overflow: scroll into the CSS but it’s not working. Please have a look here http://www.milanodabere.it/tv/ when you click on “ristoranti” and then on any other option of the menu, then click “ristoranti” again sometimes you get the scrollbar, sometimes you get not.

    Anyone can help?

    Regards,
    D.

  425. 16. January 2008 |18:04

    I would like the accordian to only open when using .activate(). How do I disable the event: click?

  426. Dustin
    16. January 2008 |18:57

    I have the same problem Derik has posted. I’m using 1.6 and it works fine when using “mouseover” but when using “click” none of the links I have listed go anywhere or do anything. Has anyone else experienced this problem?

  427. Andrew
    17. January 2008 |02:44

    Hi Jorn love the accordion,

    is it possible to make the header element a link as well?

    Cheers

  428. 17. January 2008 |21:24

    Jörn,

    Is there any way to follow a link to a page anchor after the accordion opens?

    I’ve read all the comments about cloning li elements and whatnot, but I’m hoping there is a simple way to do this.

    I’m working on a site where all the content is in accordion divs that open and close on the same page. I’m trying to have the page scroll down when a large div is opened, so that the section header is at the top of the page.

    I can send you the development url if you don’t understand what I’m working with.

    Many thanks.

  429. Santiago
    18. January 2008 |23:12

    Hi Domenico, it’s working nice on FF.
    Maybe you must set “overflow: hidden;” and use autoheight option.

    Cheers,
    Any help with my FLASH problem¿?

  430. 22. January 2008 |17:04

    Regarding the Safari problem, where an accordion seems to load collapsed, and other times not, updating jQuery has solved the problem for me.

    As mentioned before, it seems to be with jQuery not waiting for Safari CSS to be ready.

    Glad this was an easy fix! Loving the plugin

  431. 23. January 2008 |19:40

    Jörn,

    Don’t want to be a pest, but any ideas on my page anchor problem?

    Just to clarify. I have links on a page – header elements in the accordion – that have a corresponding “a:name”.

    <h3 class="sub"><a href="#biography">Biography</a></h3><a name="biography">

    I’m trying to have the accordion expand and then move the header element associated with the open accordion to the top of the page.

    Any help would be greatly appreciated.

    Thanks.

  432. 24. January 2008 |10:40

    Hi,
    thanks for the interesting post,

    I’m using the accordion to manage all my links and widgets. But they take time to load, and by the time they load the whole menu appears.
    Any simple way to wait for being loaded before display ?

  433. Chuck
    26. January 2008 |19:23

    Jörn,

    I was trying to get the height of the menus to equal content elements and then I saw your response of Dec 19 about the undocumented “fillSpace” option.

    I tried using it but it didn’t work. I then searched the js file for “fillSpace” in hopes of trying to figure out what I was doing wrong, but it not there.

    I’m using v1.5 of Accordion.

    Thanks,
    Chuck

  434. huseyin akcayurek
    27. January 2008 |05:21

    @Leandro,
    thanks for the tip. I had a problem with autoheight:false and only some of the items were shown. your fix corrected the behavior.

  435. 28. January 2008 |16:39

    Hello !

    What a beautiful work. I only have a little problem when I open a block without closing the one already open. In Firefox it takes the height of the closing and keep it until a refresh of the page, and in IE it crash (no more reaction from the accordion).

    Here’s my code :

    jQuery().ready(function(){

    // first simple Accordion with special markup
    jQuery('#faq_accordeon').Accordion({
    header: 'h2.title',
    active: 'false',
    alwaysOpen: false,
    autoheight: false,
    animated: 'easeslide'
    });

    var wizard = $("#wizard").Accordion({
    header: '.title',
    event: false
    });

    $("h2.title", wizard).each(function(index) {
    $(this)
    .next()
    .children(":button")
    .filter(".next, .previous")
    .click(function() {
    wizard.activate(index + ($(this).is(".next") ? 1 : -1))
    });
    });

    // bind to change event of select to control first and seconds accordion
    // similar to tab's plugin triggerTab(), without an extra method
    jQuery('#switch select').change(function() {
    jQuery('#list1, #list2, #faq_accordeon, #navigation').activate( this.selectedIndex-1 );
    });
    jQuery('#close').click(function() {
    jQuery('#list1, #list2, #faq_accordeon, #navigation').activate(-1);
    });
    jQuery('#switch2').change(function() {
    jQuery('#list1, #list2, #faq_accordeon, #navigation').activate(this.value);
    });

    });

    and in HTML :

    Title 1
    ...

    Title 2
    ...

    Thanks a lot

  436. Mike
    29. January 2008 |23:04

    Jörn:

    I’m having two difficulties. I have a test page using slightly modified versions of your demo markup here: http://www.wiredprojects.com/dor/site_v1/accordion2/demo/index.html

    I’ve implemented Ad’s solution for hrefs that he posted on 13.Apr.2007 to make it work in the second example that uses the “click” event. Not sure why links work when the event is set to mouseover as in the top example, but not click in the second one.

    Is Ad’s method the recommended one when using the click event?

    Also, the panel height seems to keep varying depending on re-opening a panel. Initially, they all size to fit their content, but when re-opening a panel, additional white-space seems to be opened up.

    FYI, these examples are using your demo css only very slightly modified to change “navigation” into a class for multiple use on my test page.

    Thanks,

    Mike

  437. Mike
    30. January 2008 |01:10

    Further to my earlier email, I should have mentioned that the panel-height white-space does not seem to be present in all browsers. Ones that work okay are:

    Nestcape 7.2 Mac
    Safari 3 Mac & PC
    IE 6

    The ones in which I experience inconsistent panel height on reopening are:

    Firefox 2 Mac & PC
    Opera 9.22 Mac & PC
    IE 7
    Netscape 9 PC

    Though Safari seems the exception to this theory, testing seems to suggest that something is amiss in newer browser implementations.

    Thanks,

    Mike

  438. 31. January 2008 |20:42

    It definitely doesn’t work on IE6 and JQuery 1.2.2 (throws javascript error), when the animation is set to true. With animation: false, works fine. Hope will be fixed, it’s a great plugin !

  439. Andrej
    5. February 2008 |22:10

    Hi, thanks for the Great plugin!
    I am having some difficulty using it with tertiary navigation.
    Seems that the tertiary nav closes all of the accordion navs when clicked…
    Also, is there any way to activate the header on click as well as having it reveal the sub nav, rather than just having it reveal the sub nav?

    Thanks!

    Here is an example of what I’m trying to do:

    http://letterfive.accelhost.com/

    Here is my jQuery code:

    $('#main_nav').Accordion({
    active: 'a.selected',
    header: 'a.head',
    navigation: true,
    alwaysOpen: false
    });


    <div id="nav">
    <ul id="main_nav">
    <li><a href="#">Item</a></li>
    <li><a href="#">Design</a>
    <ul id="sub_nav">
    <li><a href="#">Identity</a>
    <ul id="tert_nav">
    <li><a href="#">Brushed</a></li>
    <li><a href="#">Providence</a></li>
    <li><a href="#">Photography</a></li>
    <li><a href="#">Net</a></li>
    <li><a href="#">Film</a></li>
    </ul>
    </li>
    <li><a href="#">Print</a></li>
    <li><a href="#">Interactive</a></li>
    </ul>
    </li>
    <li><a href="#">Letterpress</a></li>
    </ul>
    </div>

  440. jschires
    6. February 2008 |20:03

    Doesn’t work all that well in FF2 with jquery1.2.2, have to use
    Rev: 2821 (dated 2007-08-21) so animation is smooth and complete.

    In IE6 using it with Rev:2821 it throws a stack overflow error, not in 1.2.2 though, just doesn’t work.

  441. jschires
    6. February 2008 |20:17

    Disregard last post of mine.
    I just grabbed the code out of SVN and everything works like a charm in all browsers.

  442. Charlie
    7. February 2008 |17:12

    Hi,

    Does anyone has a solution for a multi level accordion? I saw Xavier had a solution but after that he vanished ;)
    Or maybe a hint to work on.

    thnx!
    - Charlie

  443. christophe
    8. February 2008 |21:33

    hello, i try to use the plugin with a dl list. If you have one dd after dt (like in your demo), it is ok. But if you have more than one dd (for example :

    dt
    dd
    dd
    dd
    dt
    dd
    dd
    etc...

    the plugin only consider the first dd. It is a bug, no ?

    christophe

  444. 12. February 2008 |13:45

    I have a problem where it seems that autoheight ain’t working correctly. When I first expand a submenu with let’s say 4 entrys and then expand a submenu with 7 entries only 4 get displayed. I’m using accordion 1.5. You can have a look at it on the left hand side of this page: http://www.bluefire-jeans.eu/collection

  445. henne
    14. February 2008 |22:59

    hi,

    Habe Dein Akkordeon gerade ausprobiert und dabei folgenden Bug entdeckt:
    Im Firefox 2.0 (andere browser nich geteste sollte dort aber auch auftreten) wurde nur jeweils der erste link pro Akkordeonelement angezeigt. Also nicht die links die das akkordeon auf und zu machen, sondern weitere enthaltene links.
    Die haben keinen href, weil ich die über js dann noch bissle manipulier.

    auf jeden fall hat in zeile 250 oder so, hab ich dann bei den defaults

    header : 'a'

    in

    header: 'a.ui_accordion_list'

    geändert.
    Evtl muss man auch den Klassennamen noch modifizieren.
    Scheint zumindest auf den ersten Blick zu funktionieren.
    Top Arbeit! kommt sehr geil das Akkordeon.

    Gruß
    henne

  446. 15. February 2008 |23:12

    I need it to ignore a that I use to extend the that it displays/hides…

    How can I do that? (it keeps adding height to that “clear” div, making it cover my content!)

  447. 15. February 2008 |23:13

    I meant “ignore a <div> that I use to extend…”

  448. 17. February 2008 |13:04

    Hi all,

    I’ve been trying to use this plugin as much as I can, and also giving it to all developer that work with me.

    My question actually is pretty simple:

    I am using a 3 level depth navigation. Collapse, expand, everything works fine except the fact that the second level doesn’t allow me clicking even though the head is also a link.

    Even having children on the first level, it allows me to double click and go to the ahref. The first click expands the nav and the second opens the ahref.

    For some reason it doesn’t work for the second level. Even double clicking it just collapses and expands the 3rd level. I expect to have the head open as it is ahref as well.

    Can anybody help me?

    Thanks!

  449. 18. February 2008 |00:17

    Are there some very simple instructions on how to use this plugin? Everything I’ve been reading here makes me wonder if I could ever get it to work, sounds complicated. Thanks.

  450. 19. February 2008 |12:58

    Hi there,

    I’m having problems with the accordion in IE6/7 on PC. When rolling over the ‘merchandise’ links on the right-hand side of this page – http://www.jazzpublishing.co.uk/new_merch_nav/ – the whole column seems to be flickering as if the sub-elements of the accordion are visible for a fraction of a second. Any ideas what could be causing this?

    Thanks,
    Robin

  451. 27. February 2008 |18:27

    Fantastic bit of code dude… but i have a question about using this for a navigation. it says in the page above that you can do the following:

    navigation (Boolean): If set, looks for the anchor that matches location.href and activates it. Great for href-based pseudo-state-saving. Default: false

    is there an example of this being used as i dont really get how to make it set the ‘active’ link!?

    thanks

    /brent

  452. Nick Pannuto
    4. March 2008 |21:50

    Hey, great code, I wrote some of my own fucntions in to autohide the when animating to stop artifacting from happening. So it does almost everything, but how would I set it to have everything closed, so, when it’s loading there’s no awkward point when everything is exploded open.

    Open http://www.bestpaintstore.com in IE for an example of this awkward explosion.

  453. -paul
    4. March 2008 |21:58

    hey guys. i am trying to use a include file for the navigation

    its a 3 tired nav based on http://www.bluescap.com/nst/test2.php
    from Torgil

    i can keep my selection active.
    i have looked at the active and activate thing, but i dont understand it.
    i tried putting

    jQuery('.level1').Accordion.activate('3');
    jQuery('.level2').Accordion.activate('1');
    jQuery('.level3').Accordion.activate('1');

    in the page that is calling the include but that dosnt work.
    but the nav gets reloaded every page link.. and dosnt keep its active state..

  454. Andrés
    4. March 2008 |22:07

    Hi, first of all I wanted to thank you because your menu is great and very easy to adapt to different needs.

    I’m having some trouble making the “speed” attribute to work…could you please put a more advenced example of a menu that uses it?

    I change its values but I do not see any difference in the menu’s behaviour. I’m working with IE7 and Firefox.

    Thank you very much and best regards, Andrés.

  455. 5. March 2008 |15:46

    hello, i try to develope an effect for the ui accordion (this one) witch first close the opend element and then open the clicked element. is there anybody who can give me a sign how this works with the plugin? best regards Jens

  456. Per
    6. March 2008 |20:28

    Hi Jörn – and thanks for a wonderful implementation of the Accordion menu. Splendid work :)
    I have one question though, as I’ve looked at the other accordion-plugin – is it possible to leave menus open unless clicked?

    http://dev.evenet.org/

  457. 8. March 2008 |11:32

    @Elaine: This accordion focuses on not allowing more then one panel open at a time. What you are looking for is quite easy to do with plain jQuery.

    @Stephan: Thats fixed in the latest revision.

    @Martin: I can’t reproduce the issue you describe, could you check it again with the latest revision, or post a testpage?

    @Paul: This sounds like it is related to the issue where anchors within content elements didn’t work, that is now fixed.

    @Tom: The flash of content may be caused by something else delaying execution of the accordion script. Can’t say much about that without a testpage.

    @Derik, Dustin, Mike: Fixed in latest revision. Links now work just fine within content elements.

    @Santiago: You could try the different wmode options.

    @Domenico: Give the clearStyle:true option a try. If that doesn’t help, please provide a standalone testpage. I can’t find your accordion-init code on that page.

    @Phil: Using the latest revision, specify event: false or null/undefined.

    @Andrew, Watsei: No, header links are not supported and won’t be. If you need that, add your own logic, eg. bind a click event.

    @Djoh: You can hide the whole menu via CSS and show it once loaded via jQuery.

    @Chuck: That option was added after the 1.5 release. Give the latest revision a try – or the current release at your time of reading this.

    @David: Could you provide a testpage instead of pasting copied demo code?

    @stoyan: While the documentation says that the animated option accepts a boolean, it only accepts a boolean false. Or a string specifying an animation type.

    @Andrej: Didn’t quite get the issue, seems to work ok.

    @Charlie: Multi-level accordions work in the latest revision with autoheight:false and clearStyle:true.

    @christophe: An early version of the plugin supported that, but it wasn’t worth the trouble. You have to stick with a single dd and nest your content inside it.

    @Alexander: Please give the latest revision a try. There are quite a few related issues fixed.

    @Levi: Give clearStyle:true a try. Or disable animations (animated:false) if it doesn’t help.

    @Jose: Please give the latest revision a try and set autoheight:false and clearStyle:true to get the nested accordions to work.

    @Debbie: You may want to start with some jQuery basics first.

    @Robin: Please give the latest revision/version a try.

    @Brent: Take a look at the demo page, the second example (“Navigation”).

    @Nick: Hiding stuff using CSS should help – its applied before the JS.

    @Paul: Looks like you need a tree, not an accordion.

    @Andrés: The speed option was replaced by the animated-option. Specifying custom speeds is a bit more complicated, but much easier to use once setup. Take a look at the implementations of bounceslide and easeslide for a reference:

    $.extend($.ui.accordion, {
    	bounceslide: function(options) {
    		this.slide(options, {
    			easing: options.down ? "bounceout" : "swing",
    			duration: options.down ? 1000 : 200
    		});
    	},
    	easeslide: function(options) {
    		this.slide(options, {
    			easing: "easeinout",
    			duration: 700
    		})
    	}
    });

    @Designern01: See the previous answer. You need to provide a custom animation “specification”. In this case, a custom easing which provides the close-first-then-open behaviour. You may want to take a look at jQuery’s animation API first.

    @Per: As noted before, that isn’t what this plugin is about.

  458. 8. March 2008 |11:37

    Comments are now closed.

    • Please post questions to the jQuery UI discussion list, putting [accordion] into the subject of your post, making it easier to spot it and respond quickly.
    • Please post bug reports and other contributions (enhancements, features) to the jQuery bug tracker (requires registration). Please put [accordion] into the title of a ticket.