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

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 expanded item,

Solution 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 collaspiblevar collapsible = $(this).closest(".ui-collapsible");

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

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

Demo