How Do I Use Collapsible Region in Oracle APEX

Collapsible Regions in Oracle APEX are a simple and effective way to organize content by allowing users to expand or collapse sections of a page. This helps reduce clutter, improves user experience, and keeps the interface clean—especially when working with forms, settings panels, filters, or informational content that doesn’t need to be shown all the time. Using collapsible regions in your APEX applications is entirely declarative, meaning you don’t need custom JavaScript or CSS to implement them.

How to Use Collapsible Region in Oracle APEX

You can create a Collapsible Region in just a few steps using built-in features in the Page Designer. Here’s how:

1. Add a Region to the Page

   • Open your application in APEX App Builder.

   • Go to the page where you want to add the collapsible content.

   • Click + Region and choose Static Content, HTML, or any supported region type (e.g., Classic Report, Form, etc.).

2. Change Region Template to a Collapsible Type

   • In the Page Designer, select the region you just added.

   • Under the Appearance section, find the Template property.

   • Choose a template that includes the word “Collapsible” (e.g., Collapsible, Collapsible Hide All, Collapsible Stack).

   • Each template has different behavior. For example:

     • Collapsible — starts expanded by default

     • Collapsible Hide All — starts collapsed

     • Collapsible Stack — works well when multiple regions are stacked vertically

3. Set the Region Title

   • Provide a Title to display as the clickable heading for the collapsible area.

   • This will be shown as the header that users click to toggle the region open or closed.

4. Add Content to the Region

   • Add static text, a form, a report, a chart, or any other component inside the region.

   • The contents will be visible or hidden based on the user’s toggle action.

5. Set Optional Behavior

   • You can control whether the region is initially collapsed by using the Server-side Condition or Display Settings.

   • Optionally, apply a CSS class or style to change how the collapsible section looks.

   • You can also dynamically collapse or expand a region using Dynamic Actions with JavaScript or apex.region() calls.

Examples

Example 1: Filters Panel

• Title: “Advanced Filters”

• Template: Collapsible (starts expanded)

• Contents: Dropdowns and checkboxes for filtering data in a report

• Use case: Let users hide filters to focus on results

Example 2: Help Section

• Title: “How to Use This Page”

• Template: Collapsible Hide All (starts collapsed)

• Contents: Static content with instructions and tips

• Use case: Minimize visual noise but keep help content easily accessible

Example 3: Step-by-Step Form

• Multiple Collapsible Stack regions labeled “Step 1”, “Step 2”, “Step 3”

• Only one region visible at a time, simulating a wizard

• Contents: Form fields broken into sections

• Use case: Make large forms more digestible

Best Practices

• Keep titles meaningful so users know what the collapsible region contains.

• Use Collapsible Stack for multi-section layouts where only one section should be open at a time.

• Avoid overuse of collapsible regions—don’t make users click too much to access basic info.

• Set default states wisely—keep frequently-used sections open by default and hide optional or advanced items.

• Test with keyboard and screen readers to ensure accessibility compliance.

• Combine with Dynamic Actions to programmatically expand/collapse based on user actions or conditions.

Basic Default Look and feel

Options
Remove Body Padding
Remember Collapsible State
Arrows
Plus or Minus
Start
End
Expanded
Collapsed
Auto - Default
240px
320px
480px
640px
Default Accent
Accent 1
Accent 2
Accent 3
Accent 4
Accent 5
Accent 6
Accent 7
Accent 8
Accent 9
Accent 10
Accent 11
Accent 12
Accent 13
Accent 14
Accent 15
Remove Borders
Stack Region
Remove UI Decoration

Heading level	Body Overflow	Item Spacing	Item size	Item Width	Label Alignment
H1	Scroll- default	Standard	Default	Default
H2	Scroll - hide	Slim	Large	Stretch Form Fields	Right
H3		None	X-Large		Left
H4
H5
H6

Label Position	Sort Order Alignment	Top Margin	Bottom Margin	Left margin	Right Margin
Inline - default	Default – Start	Default	Default	Default	Default
Show Forms Labels above	Center	None	None	None	None
	End	Small	Small	Small	Small
		Medium	Medium	Medium	Medium
		Large	Large	Large	Large

Settings for Collapsible region

Oracle APEX Documentation

You can explore more about Collapsible Regions in the official Oracle APEX documentation here:
https://docs.oracle.com/en/database/oracle/apex/
Search for “Region Templates” and “Collapsible” for specific details and usage.

Conclusion

Collapsible Regions in Oracle APEX help you create cleaner, more user-friendly interfaces by hiding less important content and letting users focus on what matters. With several template options and full declarative support, you can quickly add collapsible behavior to any region on your page. Whether you are building forms, dashboards, or help sections, using collapsible regions correctly can greatly enhance both the design and usability of your application.