In the example, when clicking the Hide button, Region 2 will hide, and at the same time Region 1 will expand wide to allocate the space that was hidden by Region 2.

To accomplish this, a value is added on Static ID properties for both of these regions, this will be use to reference the region from javascript.

In this case, Region 1 is set to “R1” as Static ID while Region 2 is set as “R2”.

Two Dynamic actions is created for Hiding and Showing Regions that will be called by respective buttons.

Javascript for Hide and Expand action.

$('#R2').hide() // Hide Region 2
$('#R1').parent().removeClass('col-6').addClass('col-12')

Javascript for Hide and Expand action.

$('#R2').hide() // Show Region 2
$('#R1').parent().removeClass('col-6').addClass('col-12')

The second line of the jQuery script above tells the browser to look for the parent of “R1” in this case it is the div class above the “R1” ID. The APEX columns are divided into 12 equal parts, replacing the “col-6” with the “col-12” class, Region 1 will occupy all the columns.