Release: Accordion menu plugin 1.5

I’m happy to present you a new release of my Accordion menu plugin for jQuery. Thanks to some essential help from John Resig on animations, this may be the first release that is actually worth its code. And its the last release as a standalone plugin (stay tuned). If you are already using the plugin: An update is highly recommended. Otherwise, why don’t you give it a try?

Plugin Page and Documentation
Demo

Notable changes from the last release:

  • Option “navigation” offers simplest state-saving ever, by activating elements based on the current location
  • Option “autoheight” eases the accordion setup by calculating the largest chunk and setting that as the height for all other chunks
  • Option “animated” eases animation setup and provides smooth and flawless animations. Using the easing plugin you can replace the default slide animation with “bounceslide” and “easeslide”. Additional animations can be added as plugins to jQuery.Accordion.Animations

Have fun!

-Jörn

No more comments.
  1. Hi Jörn!

    Thanks for the new release. Two reports:

    1. Clicking is a little erratic in this new version. Sometimes it doesn’t work when I click on the item.

    2. My accordion does not obey the navigation option and automatically open when it is not the first item in the sub-category that is active.

    I have posted a partial demo here which shows the first problem – unfortunately I am still building it all into my Rails application which is not live yet. Try clicking and double-clicking the right hand menus. Sadly you cannot see the 2nd problem, but it is that the “skaters” drop-down under “Portraits” does not automatically open when following the navigation in my app. The others do automatically open.

    http://www.vish.info/clients/accordion/demo.html

    Warmest regards

  2. Hello again,

    I think I can narrow the issue down to the formatting of my list and line 180 of the JS …current.parent().parent().prev();

    Where the plugin does not correctly determine my header… perhaps I should change my menu html from this below?

    Asia
    Kashmir

    Portraits
    Dad
    Skaters

    Local
    The Payslip

    Music
    Ben

  3. fand

    Hello, thanks for this great plugin !

    I shamelessly try to reach you to report a problem that i have trying to use the plugin (Rev: 2880) with jQuery 1.2.1 (Rev: 3353).

    It works fine…expect with IE (at least IE6) !
    I got an ‘invalid parameter’ error.

    After some digging it appears to be in the Animations/slide/animation function that does:
    settings.toShow.height(Math.ceil(height – ($.fn.stop ? n * height : n)));
    The value passed to the .height function maybe be less than 0, hence the error…

    I got around the error by forcing a value >=0, but i would really appreciate if you could look into this.

    You can reproduce it by using the latest jQuery in your demo page.

    Thanks in advance

  4. Ben

    Hello, and thanks for the awesome plugin.

    I’ve run into an issue that appears to involve a problem with IE6 rather than Accordion, but I’m wondering if anyone else has seen it.

    I have an Accordion menu running at http://youinparkcity.com. Testing was completed and it was seen to run in all the major browsers. Then I got a report that on a couple of Windows machines running IE6 the menu remained fully expanded after the page loaded. I was even able to replicate the problem on another Windows machine. The odd thing is that both my testing machine and the second machine are running identical versions of IE6. Even stranger to me is that no script errors are being generated.

    I’m at a loss here. Has anyone else experienced this problem?

    Thanks again,

    Ben

  5. hernan rancati

    I want to report a problem trying to get accordion to work on IE
    (which works fine in mozilla). Here follows a simple version which does not work correctly:
    ———————————————————————–
    the following settings for an accordion does not work on IE.

    jQuery Accordion

    jQuery().ready(function(){
    jQuery(‘#mainMenu’).Accordion({
    header: ‘div.title’,
    active: false,
    event: ‘mouseover’,
    alwaysOpen: false,
    animated: ‘easeslide’
    });

    });

    a

    a1

    b

    b1

    c

    c1

    c2

  6. dennis

    Hi Jörn,

    Nice post, i got a problem maybe you can help me?

    I used the accordion plugin to get a sliding navigation and reference box. The problem is, both toogle each other. If i click on a navigationpoint it slides down – now i click on the reference box its slides down too, but the navigation slides up.

    But both should work seperately. Here my js:

    $(document).ready(function() {
    $(‘.activer’).addClass(‘active’).next(‘ul.menu’).slideDown(300);
    $(‘a.menutoggle’).click(function() {
    $(‘ul.submenu:visible’).slideUp(200);
    $(‘a.menutoggle’).removeClass(‘active’);
    $(this).addClass(‘active’).next(‘ul.submenu:hidden’).slideDown(300);
    return false;
    });
    });

    Regards,
    Dennis