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.
|Included in AUI core?||Not in core You must explicitly require the web resource key.|
|Web resource key:||
|AMD Module key:||N/A|
The trigger that expands and hides the desired content.
||the id of the content that this trigger expands/hides|
||The text that replaces the trigger text after initial invocation (collapsed state if expanded initially, expanded state if collapsed initially)|
The content to be expanded and hidden.
||use this to expand the expander by default. DO NOT use this to manipulate the expander after load. Use the events instead.|
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.
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.
The AUI Expander throws the following events, you can hook into these events to add your own functionality to the expander:
||aui-expander-trigger||Triggers when the content is expanded.|
||aui-expander-trigger||Triggers when the content is hidden/partially hidden.|
You can also trigger the following events to manipulate the expander:
||aui-expander-trigger||invokes the trigger (collapses or expands it depending on the current state of content)|
||aui-expander-trigger||expands the content|
||aui-expander-trigger||collapses the content|