Oracle APEX Tabs Container - Control selection using jQuery

This blog is about how you can control the tab selection using jQuery for Tabs Container region. I have seen, there are many other-ways to achieve same - but I have tried to following APEX's way and manage the selection by APEX's JavaScript code.

$('#<tabs_container_region_id> ul.t-Tabs:first').aTabs('getTabs')['#SR_<sub_tab_region_id>'].makeActive();

Working Demo

Hope this helps.

Jaydip Bosamiya


  1. When the page opens, I need the page to open to 2nd tab. So I put the following code in the section "Execute when page loads".
    $('#PARENT_TAB ul.t-Tabs:first').aTabs('getTabs')['#SR_TAB2'].makeActive();

    and I get error

    TypeError: cannot read property 'MakeActive' of undefined

    So I tried to create a dynamic action of change of a page item P6100_SEL_TAB which I set the value to 6 on page load. It doesn;t work.
    Can you please help me load tab2 on page load?

    1. Can you check what is the result of following when you execute from Browser cosole?

      $('# ul.t-Tabs:first').aTabs('getTabs')


Post a Comment

My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)

Popular posts from this blog

Oracle APEX - Interactive Report - Scrollbars on Top

How to create your own customized nested report regions using jQuery

Make your RESTful APIs Secured with OAuth2 - Basic, Simple and Easy Steps