Limit one item in the accordion to uncollapsed

Question

All the collapsible items should not collapse. At-least one of the items should stay uncollapsed. I want to change the following example to fulfill my needs. I will appreciate any help!

/*\Animate collapsible set;\*/

$(document).one("pagebeforechange", function () {
    // animation speed;
    var animationSpeed = 200;

    function animateCollapsibleSet(elm) {
        // can attach events only one time, otherwise we create infinity loop;
        elm.one("expand", function () {
            // hide the other collapsibles first;
            $(this).parent().find(".ui-collapsible-content").not(".ui-collapsible-content-collapsed").trigger("collapse");
            // animate show on collapsible;
            $(this).find(".ui-collapsible-content").slideDown(animationSpeed, function () {
                // trigger original event and attach the animation again;
                animateCollapsibleSet($(this).parent().trigger("expand"));
            });
            // we do our own call to the original event;
            return false;
        }).one("collapse", function () {
            // animate hide on collapsible;
            $(this).find(".ui-collapsible-content").slideUp(animationSpeed, function () {
                // trigger original event;
                $(this).parent().trigger("collapse");
            });
            // we do our own call to the original event;
            return false;
        });
    }
    // init;
    animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']"));
});

Here is a working example on animating a collapsible set: http://jsfiddle.net/jerone/gsNzT/

this expands one and collapse the rest, what do you need exactly? you always want one collapsable expanded? — Omar, Dec 05 '13 at 18:14
if one item is expanded and i click the same element to collapse then it should not collapse (current not the case in this example). But if i click some other item, the current expanded item should collapse (as the example does). — naki, Dec 06 '13 at 09:04
Then you need to integrate your code above with the answer here http://stackoverflow.com/a/20002186/1771795 — Omar, Dec 06 '13 at 09:45
yes it worked...i was already using the code you mentioned....but some how it did not worked...now its working...thanks Omar! — naki, Dec 06 '13 at 11:27

score 0 · Answer 1 · edited May 23 '17 at 11:57

So you don't want to allow that all the items are collapsed? I would do it like this: Catch the collapsing event and then:

if collapsing item is currently expanded (.attr('data-collapsed') == "true") then return false and prevent collapsing
if collapsing item is not urrently expanded, it's ok, it will collapse, and another item will expand

You might be considered to check this: How do I restrict a collapsible item to stay expanded...

also check in jquery mobile documentation if there is already implemented method for this

Limit one item in the accordion to uncollapsed

1 Answers1