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.
| Rw ui expands macro | ||||||||
|---|---|---|---|---|---|---|---|---|
This is a first example paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus at ultrices mi tempus imperdiet nulla. Tortor consequat id porta nibh. Donec ultrices tincidunt arcu non. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Sem fringilla ut morbi tincidunt augue interdum velit. Sit amet aliquam id diam. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. In pellentesque massa placerat duis ultricies lacus sed. Arcu bibendum at varius vel pharetra vel turpis nunc.
This is a second example paragraph. Natoque penatibus et magnis dis parturient. Nec ultrices dui sapien eget mi proin. Diam quam nulla porttitor massa id neque aliquam. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Vitae sapien pellentesque habitant morbi tristique. Elementum nibh tellus molestie nunc non. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Blandit cursus risus at ultrices mi tempus imperdiet. Arcu non sodales neque sodales ut etiam sit amet. Dui vivamus arcu felis bibendum ut. Et tortor consequat id porta. Cursus euismod quis viverra nibh. Libero enim sed faucibus turpis in eu mi. Integer vitae justo eget magna fermentum iaculis eu. Quis enim lobortis scelerisque fermentum dui faucibus in. Sit amet porttitor eget dolor morbi non. Etiam non quam lacus suspendisse faucibus interdum posuere lorem ipsum. |
Add the UI Expand macro to a page
...
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.
...
| Code Block |
|---|
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 expanded macro.