Region Flip in APEX

Purpose of this post is to demonstrate region flips in APEX. 

The region flip feature provides a rich user effect in UI/UX of your application by flipping the regions without actually loading the page to toggle between the details.

Below are its implementation steps:

Step 1: In order to make the Flip function work, first you need to include jQuery flip.js on your page. Click here to download the file (flip.js - it's in the src folder in the download).
Step 2: Upload the flip.js file into Static Application/Workspace Files under shared components. Copy the Reference link of the file. i.e #APP_IMAGES#flip.js or #WORKSPACE_IMAGES#flip.js
Step 3: Edit the page where you want to have the region flip, Under Javascript > File URLs > paste the reference link got in Step 2. 
Step 4: Edit Page > Under Javascript > Execute when page loads > enter the below code 

$("#card").flip({
trigger: 'manual'
});

Step 5: Create your parent region that will hold the 2 new child regions, set static ID of parent region to 'card' or anything you want to call it, as long as you update the flip.js file above.
Step 6: For the 2 child regions, set the 'Column CSS Classes' under region Layout section to 'front' and 'back' respectively.
Step 7: Create respective button on each child regions, and call a dynamic action on Click of each button to 'Execute JavaScript Code' as mentioned below

'$("#card").flip('toggle');'

For more flip options refer the below URL:
http://nnattawat.github.io/flip/

Click here to see the DEMO of this feature. Use demo/demo to login.

Cheers,
Prashanth