Dynamic action based Expand all and collapsed all in oracle apex

Dynamic action based Expand all and collapsed all in oracle apex

  • Create two buttons like Expand all and Collapse All
  • Create the Cargo Status ad Shipment details region and select the collapsible template and put the static id for each region like below
  • Click the Expand button and create the dynamic action for Execute JavaScript code like below
  • Place the code like ( This is for Expand all dynamic action)
    $('#CARGO_STATUS.a-Collapsible.is-collapsed').removeClass('is-collapsed').addClass('is-expanded');
    $('#SHIPMENT_DETAILS.a-Collapsible.is-collapsed').removeClass('is-collapsed').addClass('is-expanded');
    $('#CARGO_STATUS.a-Collapsible .a-Collapsible-content').show();
    $('#SHIPMENT_DETAILS.a-Collapsible .a-Collapsible-content').show();
  • Place the code like (This is for Collapse all dynamic action
    $('#CARGO_STATUS.a-Collapsible.is-expanded').removeClass('is-expanded').addClass('is-collapsed');
    $('#SHIPMENT_DETAILS.a-Collapsible.is-expanded').removeClass('is-expanded').addClass('is-collapsed');
    $('#CARGO_STATUS.a-Collapsible .a-Collapsible-content').show();
    $('#SHIPMENT_DETAILS.a-Collapsible .a-Collapsible-content').show();
  • The same way you can create the N number of region and handle the unique static id and handle the JavaScript code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s