Use this when you need to show users one or more small snippets of a larger body of text in order to keep the
user interface lightweight and scannable.
This pattern includes both revealing the rest of the text on the same screen, and linking to another screen for
the full text.
Status
API status:
general
Web resource key:
com.atlassian.auiplugin:aui-expander
AMD Module key:
N/A
Experimental API:
5.1
General API:
5.8
Examples
Content title
What happens when you add a shiny new browser to a stack of already-disagreeing citizens? You’ll inevitably
find some bugs. This is the story of how we found a rendering quirk and how the Atlassian frontend team
found and refined the fix. The Problem The Atlassian User Interface (AUI) library has just finished an IE10
sprint to get our library prepped and ready for the newest member of the browser family. While IE10 seems
generally quite good, we found a couple of problems due to IE10 dropping conditional comments; plus some
undesirable behaviours.
Show more
Code
Regular expander
Initially open expander
Reveal text
Soy
Regular expander
Reveal text
Options
HTML
.aui-expander-trigger
The trigger that expands and hides the desired content.
Attribute
Description
aria-controls
the id of the content that this trigger expands/hides
data-replace-text
The text that replaces the trigger text after initial invocation (collapsed state if expanded initially,
expanded state if collapsed initially)
.aui-expander-content
The content to be expanded and hidden.
Attribute
Description
aria-expanded
use this to expand the expander by default. DO NOT use this to manipulate the expander after load. Use
the events instead.
.aui-expander-short-content
An element containing the short version of the content to be shown when the content is hidden, must be placed as
the child of a trigger.
CSS
The expander uses css to determine a collapsed state. If you apply a min-height attribute to the
aui-expander-content element it will collapse to this height. If no min-height is specified the
collapsed state is completely hidden.
Events
The AUI Expander throws the following events, you can hook into these events to add your own functionality to
the expander:
Event
Element
Description
aui-expander-expanded
aui-expander-trigger
Triggers when the content is expanded.
aui-expander-collapsed
aui-expander-trigger
Triggers when the content is hidden/partially hidden.
You can also trigger the following events to manipulate the expander:
Event
Element
Description
aui-expander-invoke
aui-expander-trigger
invokes the trigger (collapses or expands it depending on the current state of content)