Oracle APEX - Remove Show All from region selector

Oracle Application Express (APEX) offers a lot of regions to be displayed in a single page without cluttering the screen display. One such way of making a page to display lot of contents is using the Region Display Selector.

In this tip however I am not going to show how to display the "Region Display Selector" but an inherent problem with this control.

I have a screenshot of this control in action. I have Five regions in this sample page.

For each region this "Display Selector creates a link in its control. As soon as you click a particular region, only that specific region will be displayed. The remaining will be hidden.

The "drawback" is that there is no option to hide the first option "Show All". Initially when the page loads the "Show All" will be selected and all regions will be displayed.

I think this should be a great feature which should be available in-built within Apex. But as of 4.2.3 version which I am using, this feature is not available. But its not a big deal to make it hidden. As mentioned in this blog, it only requires 3 lines of jQuery code to be added. I am making this post as a reference to myself based on the blog entry mentioned.

Do the following to make this change in your page:
Step 1: Edit Page and create a Dynamic Action

Step 2: Select the Page Load event, and Execute Javascript code while creating the dynamic action.

The magical 3 line of jQuery Code is below:

$('.apex-rds li:first-child').remove();

$('.apex-rds li:first-child').addClass('apex-rds-first');

$('.apex-rds li:first-child > a').trigger('click');

That is all required to be done for making the change. The Show All will be hidden and only the first region will be made visible.

Thanks to Nick Buytaert for this tweak.