Can't programmatically close collapsible in jQuery mobile popup

Question

My project has a popup that contains several collapsible elements. When the popup is first displayed, the collapsible elements are collapsed. The user expands one or more element and then takes an action.

The problem is that I want to reset the popup after the user takes the action so that all collapsibles are closed the next time the popup is shown. I have tried to trigger the collapse as shown below. I have read several posts that suggest that this trigger should work but I have had no success. A jsfiddle is included below. The example in the jsfiddle only has one collapsible element, but shows the issue....

Your help and suggestions would be very much appreciated.

 $('#manageChecklistPopup').on('popupafterclose', function(event) {
        // collapse not working :(
        console.log('popup has closed.');

        $('.ui-collapsible').trigger('collapse');

    });

https://jsfiddle.net/qyg53ejy/

Answer 1

You need to call the collapse method , not trigger an event:

$('#createChecklist').collapsible( "collapse" );

Updated FIDDLE

Answer 2

You could do one of the following to close a collapsible:

Call collapse method provided but jQuery ui

$('#createChecklist').collapsible( "collapse" );

OR trigger a click (you have to first check if its open otherwise the click will open it):

$('#createChecklist .ui-collapsible-heading-toggle').trigger('click');

OR remove class:

$('#createChecklist .ui-collapsible-content').addClass('ui-collapsible-content-collapsed');

DEMO: https://jsfiddle.net/qyg53ejy/2/