APEX Collapsible Region – Expand/Collapse

Was updating some long-time apps to APEX 23.1 and found that the old jQuery way ot/collapse an APEX Collapsible region no longer works – so I had to adapt.

Now, I use this to collapse or exand an APEX region with a Collapsible template:

//collapse the easy intuitive way
$('#MY_REGION').collapsible("collapse");

//expand the easy intuitive way
$('#MY_REGION').collapsible("expand");

Much easier to remember, makes more sense. Documents itself.

For back reference, I used to be able to use this syntax:

// collapse the old way
$('#MY_REGION button.t-Button--hideShow[aria-expanded="true"]').click();

//expand the old way
$('#MY_REGION button.t-Button--hideShow[aria-expanded="false"]').click();

With APEX 23.1 the Collapsible region template was updated. Good news, I longer had to use custom Collapsible templates – thank you APEX team – as the spacing and declarative options were so much better. Bad news, that jQuery .click method no longer worked. The HTML. classes and CSS are different. The old jQuery .click() method mimiced a click on the expand/collapse button and effected a colllapse or expand. Researched more, that jQuery .click() was deprecated w JQuery 3. Researched more for a solution, finally found the now-preferred way, above. Thank you John Synders, again.

By “APEX Collapsible region” I mean an APEX region with the Collapsible region template.

Always an adventures on an upgrade. Moving forward. Happy coding!