.expand-container .expand-control.open .expand-icon background: url('/images/icons/minus.png') no-repeat; /* Changes open to minus */
| Macro | Behavior | Best Use Case | | :--- | :--- | :--- | | | Hides content behind a clickable toggle. | Non-essential details, spoilers, long logs. | | Excerpt | Marks a section of text to be reused on other pages. | Creating a "Summary" that appears on a dashboard. | | Section | Creates horizontal columns (usually paired with the Column macro). | Laying out images side-by-side. |
Review your top 10 longest Confluence pages. Wherever you see a massive table or a wall of text, wrap it in an expand macro. You will immediately see a drop in "Where is the X?" questions.
.expand-control .expand-icon background: url('/images/icons/plus.png') no-repeat; /* Changes chevron to plus */
When a page requires users to scroll past three pages of legal disclaimers, a massive database schema, or a detailed changelog to find the "Save" button, you lose user engagement. This is where the macro becomes an essential tool for every Confluence admin and content creator.
The allows you to hide content behind a toggle. Instead of deleting verbose information, you "collapse" it until the reader needs it. This article provides a full technical and practical breakdown of how to use, customize, and troubleshoot the Expand macro in Confluence (Cloud, Data Center, and Server). 1. What is the Expand Macro? (The UI Perspective) In the Atlassian ecosystem, "UI Expand" refers to the visual component that creates a horizontal blue bar containing a heading and a chevron icon (▶). When clicked, the chevron rotates (▼) and reveals a hidden panel of content.
By mastering the expand macro, you move from being a "content writer" to an "information architect." You respect your user’s attention span by hiding the complexity until it is requested.
.expand-control background-color: #f4f5f7; /* Light grey instead of blue */ border-left: 3px solid #ffab00; /* Yellow accent border */
