UI Expand(s) macro

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.

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(){....});

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 expanded macro.