Expander

Ask a question Design guidelines

Summary

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
Included in AUI core? Not in core You must explicitly require the web resource key.
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

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)
aui-expander-expand aui-expander-trigger expands the content
aui-expander-collapse aui-expander-trigger collapses the content