Oracle Apex: Show or Hide DOM Elements Using JavaScript

  • Post author:
  • Post category:OrclApex
  • Reading time:3 mins read
Specify Static id for a button in Oracle Apex.

In Oracle Apex, use $x_Show() and $x_Hide() JavaScript API methods to show or hide DOM elements.

A DOM element can be a region, button, page item, etc. But except page item, other elements such as regions and buttons must have a static id specified because $x_Show() and $x_Hide() uses the DOM node as an argument. Below is the syntax for both the methods:

$x_Show(pNd); //  Shows the specified DOM element
$x_Hide(pNd); // Hides the specified DOM element

In the following example, it will demonstrate how to show or hide a button in Oracle Apex using the JavaScript:

Show or Hide Button in Oracle Apex using JavaScript

On your page, click on the button and specify the static id for the button as shown in the image below:

Specify Static id for a button in Oracle Apex.

NOTE: A static id for an element should be unique, meaning you can not assign the same static id to another element on the same page.

You can now hide this button using the following JavaScript command:


To show the button back:


Suppose you want to hide the button if the primary key field is null. Check the following example for it:

if (apex.item("P2_EMPNO").isEmpty()) {
} else {

Show or Hide Region in Oracle Apex using JavaScript

Specify the static id for the region and show or hide, as shown in the below example:

$x_Hide("rgnEmp"); // it will hide the region having static id rgnEmp

To show it back:

$x_Show("rgnEmp"); // it will show the region having static id rgnEmp

Show or Hide a Page Item in Oracle Apex using JavaScript

For a page item such as text field, numeric item, and select list, you don't need to specify the static id for them.

Use their names in place of static id to show or hide them. In the below example, it will hide the page item P2_ENAME:


Reference: Oracle Apex API reference

Related tutorial:

Vinish Kapoor

An Oracle Apex Consultant, Oracle ACE, and founder of and a question and answer forum for developers.

This Post Has 5 Comments

  1. George
    $x_Show and $x_Show are placed in a DA?
    1. Vinish Kapoor

      Yes, but action type should be Execute JavaScript code.

    2. Joseph

      Thanks, it worked for me.

  2. Marion

    Thanks for this; working with an IR. I have the buttons and an extraneous region hidden. How can I hide the Interactive Report Search Bar?

  3. douglas

    is it posible with a interactive report a especific column to hide when the value is empty?

Comments are closed.