Left Side Column, but Toggleable #JoelKallmanDay

If you’ve ever built an Oracle APEX app using the Left Side Column page template, you know how useful it can be — it’s perfect for quick navigation, filters, or contextual info.

But when your page gets a lot of content, that left-side column can start feeling a bit in the way. Wouldn’t it be nice if users could collapse or expand it whenever they want? Let’s see how to make the Left Side Column toggleable — step by step.

1. Add a JavaScript file to your Application or Workspace files

Go to Shared Components → Static Application Files (or Workspace Files) and create file left-side-toggle.js

function toggleSidebar() {
    const $side = $("#t_Body_side");
    const $icon = $("#toggle-btn > span");

    $side.toggleClass("is-collapsed");
    $icon
    .toggleClass("fa-chevron-right", $side.hasClass("is-collapsed"))
    .toggleClass("fa-chevron-left", !$side.hasClass("is-collapsed"));
}

function toggleSidebar() {
    const $side = $("#t_Body_side");
    const $icon = $("#toggle-btn > span");

    $side.toggleClass("is-collapsed");
    $icon
    .toggleClass("fa-chevron-right", $side.hasClass("is-collapsed"))
    .toggleClass("fa-chevron-left", !$side.hasClass("is-collapsed"));
}

2. Add a CSS file to your Application or Workspace files

Go to Shared Components → Static Application Files (or Workspace Files) and create file left-side-toggle.css

:root {
    --ut-body-sidebar-width: 340px; 
    --filter-region-display: block;
} 

#filter-region {
    display: var(--filter-region-display);
}

#t_Body_side {
    --ut-body-sidebar-width: 340px;
    --filter-region-display: block;
    transition: all 0.2s ease;
}

#t_Body_side.is-collapsed {
    --ut-body-sidebar-width: 0px;
    --filter-region-display: none;
}

#toggle-btn {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--ut-body-sidebar-background-color);
    border-left: none;
    border-top: none;
    z-index: 470;
}

:root {
    --ut-body-sidebar-width: 340px; 
    --filter-region-display: block;
} 

#filter-region {
    display: var(--filter-region-display);
}

#t_Body_side {
    --ut-body-sidebar-width: 340px;
    --filter-region-display: block;
    transition: all 0.2s ease;
}

#t_Body_side.is-collapsed {
    --ut-body-sidebar-width: 0px;
    --filter-region-display: none;
}

#toggle-btn {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--ut-body-sidebar-background-color);
    border-left: none;
    border-top: none;
    z-index: 470;
}

1. Reference your JavaScript file

In Page Attributes → JavaScript → File URLs, add

#WORKSPACE_FILES#left-side-toggle#MIN#.js

#WORKSPACE_FILES#left-side-toggle#MIN#.js

2. Reference your CSS file

In Page Attributes → CSS → File URLs, add

#WORKSPACE_FILES#left-side-toggle#MIN#.css

#WORKSPACE_FILES#left-side-toggle#MIN#.css

3. Create a Static Region

• Name: Button Wrapper
• Slot: Full Width Content
• Template: Buttons Container
• Template Options: no-padding, remove UI decoration

4. Create the TOGGLE Button

• Name: TOGGLE
• Label: Expand / Collapse Side Column
• Button Template: Icon
• Template Options: Large, Simple, Last Button
• Icon: fa-chevron-left
• Static ID: toggle-btn

5. Add a Dynamic Action

• Name: Expand / Collapse Side Column
• Event: Click
• Button: TOGGLE

6. Add an Action

• Action: Execute JavaScript Code

 toggleSidebar();

 toggleSidebar();

And voilà!

Expanded:

Collapsed:

Your Left Side Column is now fully toggleable — giving users more space when they need it, without losing context.