Documentation

Expander

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

Examples

Code

Regular expander

<div id="expander-with-replace-text-content" class="aui-expander-content">
    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
</div>
<a id="replace-text-trigger" data-replace-text="Read less" class="aui-expander-trigger" aria-controls="expander-with-replace-text-content">Read more</a>

Reveal text

<div id="reveal-text-content" class="aui-expander-content">
    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.
    <a id="reveal-text-trigger" data-replace-text="Show more" data-replace-selector=".reveal-text-trigger-text" class="aui-expander-trigger aui-expander-reveal-text" aria-controls="reveal-text-content">
        <span class="reveal-text-trigger-text">Show more</span>
    </a>
</div>

Soy

Regular expander

{call aui.expander.trigger}
    {param id: 'replace-text-trigger'/}
    {param contentId: 'expander-with-replace-text-content'/}
    {param tag: 'a'/}
    {param content: 'Read More'/}
    {param replaceText: 'Read Less'/}
{/call}
{call aui.expander.content}
    {param id: 'expander-with-replace-text-content'/}
    {param content}
        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
    {/param}
{/call}

Reveal text

{call aui.expander.revealText}
    {param triggerId: 'reveal-text-trigger'/}
    {param contentId: 'reveal-text-content'/}
    {param contentContent}
        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.
    {/param}     
{/call}

Options

HTML

.aui-expander-trigger

The trigger that expands and hides the desired content.

.aui-expander-content

The content to be expanded and hidden.

.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:

You can also trigger the following events to manipulate the expander: