How do I restrict a collapsible item to stay expanded unless i click the other collapsible items to expand but not the collapsible item itself

Question

I am working on a mobile website and using jquerymobile. I have 4 collapsible items in an accordion. I want to have one of the items to stay expanded. If i click the expande

Answer 1

You need to listen to click on .ui-collapsible-heading-toggle and check if the clicked collapsible is either collapsed or expanded. If the collapsible is collapsed, it will have a class .ui-collapsibe-collapsed.

If the expanded collapsible is clicked, it will prevent collapsing itself by return false, otherwise, it will collapse all expanded ones.

$(".ui-collapsible-heading-toggle").on("click", function () {

    // clicked collaspible
    var collapsible = $(this).closest(".ui-collapsible");

    // check if its whether collapsed
    if (collapsible.hasClass("ui-collapsible-collapsed")) {

        // collapse expanded collapsibles
        $(".ui-collapsible").not(collapsible).trigger("collapse");
    } else {
        // keep expanded clicked collapsible as is
        return false;
    }
});

Demo