UI Expand(s) macros
The UI Expand macro helps you keep your pages compact, by dividing information into expandable items.
Example
In this example, we created one UI Expands macro that contains two UI Expand macros.
Add the UI Expand macro to a page
This solution consists of an outer macro which is a container for inner macros (the expendable items). First, add a UI Expands (with an -s) macro. Inside the UI Expands macro, place as many UI Expand (without an -s) macros as you want.
There are two ways to add a macro to a page:
Type { plus the macro’s name. Select the macro from the dropdown list.
In the Confluence editor’s top menu, click + > Other macros and search for the macro.
Settings
To change the macro’s settings, click the macro > Edit.
Setting | Description | Available since Toolkit version |
|---|---|---|
Title | The title of the expandable item. | 1.0 |
Expanded | Check this box if you want the item to be expanded by default. | 1.0.1 |
Events
You can programatically listen for events on this macro.
They're triggered with AJS.trigger() and can be subscribed to using AJS.bind.
AJS.bind('event/name', function(){....});Event | Description | Available since Toolkit version |
|---|---|---|
| Triggers every time the expandable item is toggled (expanded or collapsed) | 2.3.10
|
Link to an expandable item
When you expand a UI Expand macro, the page’s URL is updated with a hash reference. You can use this URL to link directly the macro: the user automatically lands on the part of the page that includes the macro.