jquery UI accordion close issue

Question

For creating the accordion i used the jquery ui accordion.

$('#programOutlineBox table tr td').accordion({
        collapsible: true,
        active: false,
        heightStyle: "content",
        autoHeight: false,
    });

And for expand all and collapse all below is the code

//expand all

$('#div .ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});

$('#div .ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');

$('#div .ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).slideDown(); 

//collapse all

$('#div .ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});

$('#div.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');

$('#div .ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).slideUp();

But the problem comes when I click on expand all ,the accordion opens properly but while closing individual items one by one it needs to be double clicked.Dont really figure out whats going wrong here?

Answer 1

The jQueryUI Accordion widget doesn't support opening more than one accordion at a time.

See the documentation here: http://api.jqueryui.com/accordion/#option-active
You can have either 1 or 0 panels open at a time.

Your code is manipulating the styles to make it appear that all accordion entries are visible but it is not changing the internal accordion state so jQueryUI still thinks all the accordions are closed.

When you click on one of these "open" accordion items jQueryUI is trying to open that accordion (so it looks like nothing happens) and then when you click it again it will close.

To fix this your options are:

1. Change to a different Accordion library that supports multiple open items (eg Bootstrap Collapse supports this http://getbootstrap.com/javascript/#collapse there are other libraries out there too)

2. If you want/need to keep using jQueryUI then change your page to use multiple single-item accordions.

---

Here is an example using multiple Accordions: http://jsfiddle.net/Sly_cardinal/WLsUx/2/

HTML:

<h2>Multiple Accordions</h2>
<div id="accordion2">
    <button type="button" class="expand">Expand All</button>
    <button type="button" class="collapse">Collapse All</button>

    <div class="accordion">
        <h3>Section 1</h3>
        <div>
            <p>Vestibulum a velit eu ante scelerisque vulputate.</p>
        </div>
    </div>

    <div class="accordion">
        <h3>Section 2</h3>
        <div>
            <p>Vivamus non quam. In suscipit faucibus urna. </p>
        </div>
    </div>

    <!-- Add as many accordions as needed here... -->
</div>

JavaScript:

$(function() {
    $(".accordion").accordion({
        // Allows the accordion to be closed - i.e. no item is selected.
        collapsible: true
    });

    $('.expand').click(function(){
        // Trigger each accordion to open it's only element.
        $(".accordion").accordion('option', 'active', 0);
    });

    $('.collapse').click(function(){
        // Close all accordions.
        $(".accordion").accordion('option', 'active', false);
    });
});

If you need to allow only one Accordion to be open at a time then you will need to handle that behaviour between each of the jQueryUI Accordions you have on the page.

Answer 2

I do agree with the statement above "The jQueryUI Accordion widget doesn't support opening more than one accordion at a time".

I had similar requirement by my client towards the end of the project phase and adding multiple accordions would have ended up with a lot of javascript re-work.

But i did achieve the behavior by making small tweaks as below.

Problem with "clicking twice to close a section of accordion after you open up all sections at a time":

1) Since you opened all sections of the accordion by adding/removing classes and attributes instead of the "jquery-ui" script taking care of it internally, the accordion "ACTIVE" option is not set. [So now you have sections opened but the accordion active flag is false].

2) When you click to close the section, the first click takes to set the active section on the accordion. Once the active section is set the next click would know to collapse the section.

If you want to see the behavior, put a break point on the "_eventHandler:" method of jquery accordion in the referenced "jquery-ui.js" file when you close the section.

Solution:

1) I added a custom attribute to all the header sections during 'expand all' and i would remove the attribute from all the sections on either 'collapse all' or individual section close.

function expandAll() {
var sections = $('.accordion').find("h3");
sections.each(function (index, section) {
    $(this).find("span").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
    $(this).removeClass("ui-corner-all").addClass("ui-corner-top").addClass("ui-state-active").addClass("ui-state-focus").addClass("ui-accordion-header-active").next().addClass("ui-accordion-content-active").slideToggle();
    $(this).attr({ "aria-selected": "true" }).next().attr({ "aria-expanded": "true", "aria-hidden": "false" });

    //My custom attribute for tracking
    $(this).attr("myCustomCls", "custCls");
});
$('.accordion').accordion();
}

function collapseAll() {
var sections = $('.accordion').find("h3");
sections.each(function (index, section) {
    $(this).find("span").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");
    $(this).removeClass("ui-corner-top").addClass("ui-corner-all").removeClass("ui-state-active").removeClass("ui-state-focus").removeClass("ui-accordion-header-active").next().removeClass("ui-accordion-content-active").slideToggle();
    $(this).attr({ "aria-selected": "false" }).next().attr({ "aria-expanded": "false", "aria-hidden": "true" });

    //Removing the custom attribute
    $(this).removeAttr("myCustomCls");
});
$('.accordion').accordion();
}

2) Wire up a custom js click event on the header of the accordion which would set the section active only when all sections are opened together . In normal cases jquery accordion will handle it.

$(".accordion").find("h3").click(function (event) {
    if ($(this).attr("myCustomCls")) {
        var id = this.id;
        var index = id.substring(id.length - 1);
        $(".accordion").accordion("option", "active", index);

        //Remove the attribute once section is being closed.
        $(this).removeAttr("myCustomCls");
    }
});