Dynamically Expand a Collapsible Region

I use collapsible regions in APEX all the time. Mostly, to hide away audit information that most users don’t really care about but a few people might want to see. I usually default them to load in the collapsed state so that I can keep a page clutter-free until the user decides they want to take a gander at what lies within. But, what if there is some important information inside the collapsible region? What if the user never expands the region? Don’t worry - its pretty easy to dynamically expand a collapsible region when it has content and collapse it when it doesn’t.

Simply create a collapsible region and go ahead and default it to the collapsed state. For this example, my region contains a classic report. You will also need a hidden page item to store the number of records your collapsible region contains or otherwise determine if your region needs to be expanded.

Next, create a dynamic action that fires on page load, this will control the initial state of the region.

The first True action sets the value of the hidden page item. This value determines if the collapsible region has any content. In my case, this is simple - I just need to count the number of rows in the table:

Action: Set Value
Set Type: SQL Statement
SQL Statement: select count(*) from jsd_notes
Items to Submit: P20_NUM_NOTIFICATIONS

The second True action expands or collapses the region, if needed:

Action: Execute Javascript Code
Code:

 var numEntries = $v("P20_NUM_NOTIFICATIONS")
   , $region = $(this.affectedElements[0]);
  
 if (numEntries > 0 && $region.hasClass('is-collapsed') ) {
      $region.find("button.t-Button--hideShow").eq(0).click();
  }
  
 if (numEntries < 1 && $region.hasClass('is-expanded') ) {
      $region.find("button.t-Button--hideShow").eq(0).click();
  }

Affected Elements - Selection Type: Region
Region: Notifications

The JavaScript code above looks at the value of the hidden page item and if that value is greater than zero and the current state of the region is collapsed, it will find the hideShow button of the region and call the click method, causing the region to expand. The same is true for the opposite - if the region no longer contains any data and is in the expanded state, the region will collapse.

This finished functionality is shown below:

Demo Here

In my demo application I also used this same dynamic action functionality to fire on dialog close and after delete of a row. This way I know the report is in the state I want it.

I am sure there are a multitude of other ways to accomplish this, but this is what worked for me. I hope it can help you as well.

- Jackie -