Collapsable

General Guidelines

Collapsables allow the user to expand or collapse a chosen section, typically on a form or in a table. Collapsable areas are triggered by a caret icon. A downward pointing caret (arrow) icon expands a collapsible section, and an upward pointing caret collapses the section.

Use Collapsables with the record component and with content cards. Please see Record Patterns for further information on records.

Usage

Do's and Don'ts

Do use collapsables to make a section expand or collapse

Do use caret icons with collapsables

Don’t use a right or left facing caret or arrow to represent the downward and upward motion

Coming soon...

Please enjoy a cat while you wait

Examples

For details on when to use this component, please see the Usage tab.

Basic Example

At its minimum, a Collapsable can be configured using a data-collapsable attribute and a sibling block element with a class of iris-collapsable. This can be used along with your own styles to provide a means of hiding content. You can also provide a query selector like data-collapsable=".some-other-class" if the class iris-collapsable simply won't do.

<div class="width--100" >
    <div data-collapsable>
        <span>Some pretty awesome visible information. Click on me to unhide a gem.</span>
    </div>
    <div class="iris-collapsable">
        <span>This info was collapsed.</span>
    </div>
</div>

Within a Record Component

Collapsables are most frequently applied for use with the record component. Collapsables allow you to place detailed information into a closed drawer(noted by the class iris-collapsable) that can be expanded by the user in order to see the contents. For more use cases, see the Patterns page for Records.

This example also shows other interactions with Collapsable:

• Adding <span class="iris-chevron" aria-hidden="true"></span> will let Collapsable know it needs to toggle the chevron up and down based on it's collapsed state.
• An element can be decorated with data-close within the iris-collapsable drawer to act as a closing mechanism for the drawer.

<div class="iris-record flex--col">
    <div class="container-fluid" data-collapsable>
        <div class="row flex-items--center">
            <div class="col-11">
                Some helpful information.
            </div>
            <div class="col-1">
                <span class="iris-chevron"></span>
            </div>
        </div>
    </div>
    <div class="iris-collapsable width--100">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text--right">
                    <button class="iris-button iris-button--ghost" aria-label="Close Drawer" data-close>
                        <span class="iris-button__icon font-icon-times"></span>
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <span>Some information in the drawer</span>
                </div>
            </div>
        </div>
    </div>
</div>

Separated Elements

In some cases, you might need to separate the trigger element from the collapsable element. You can do this using the aria-controls attribute for the collapsable.

<button class="iris-button iris-button--primary" data-collapsable aria-controls="collapsable_drawer">
    <span class="iris-button__text">Toggle Content Drawer</span>
</button>
<hr/>
<div>
    <span class="font--italic">Note: Text will pop up below when pressing the button!</span>
    <div class="container-fluid width--100" id="collapsable_drawer">
        <div class="row">
            <div class="col-12"><span>Content inside Drawer</span></div>
        </div>
    </div>
</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

• Long groups with data-collapsable may benefit from aria-label as a shorter representative.
• data-close should be placed on a button.
• The target element should not be nested within the data-collapsable.

Accessibility that Collapsable provides for you:

• wires up aria-expanded to the data-collapsable element.
• wires up aria-controls to the data-collapsable element if it isn't specified.
• wires up tab-index for both the data-collapsable and the target element.

API

Examples

Getting the CollapsableComponent Object of an Element

var element = document.getElementById('test-iris-collapsable-source');
var collapsableComponent = Alkami.Iris.CollapsableComponent.componentForElement(element);

// Toggles the collapsed state
collapsableComponent.toggle();

Events

Events fire on the source Element.

Constructors

new CollapsableComponent(sourceElement, [targetElement])

• sourceElement - The element that activates the collapsing/expanding action.
• targetElement - optional element that will collapse/expand. Default: sibling element with '.iris-collapsable'.

Create a new CollapsableComponent using the sourceElement and targetElement. If a targetElement is not specified, it will look around for a sibling element of '.iris-collapsable' or whatever is specified in data-collapsable on the sourceElement.

Methods

static CollapsableComponent.init([nodeOrNodeList])

• nodeOrNodeList - The optional node or node list that will be configured to be collapsable. Default: the query [data-collapsable] is used.

initializes any new Collapsables found. Returns an array of CollapsableComponents.

static CollapsableComponent.destroy(node) Destroys the CollapsableComponent viewmodel associated with the node.

static CollapsableComponent.refresh(nodes) Initializes any new collapsable components on the node(s) passed in. Returns an array of CollapsableComponent.

static CollapsableComponent.componentForElement(sourceElement)

• sourceElement - The element that may be used to activate a Collapsable.

Checks if a DOM element has a CollapsableComponent object associated with it. Returns the CollapsableComponent object if one exists or null if one is not found.

collapsable.toggle()

Toggles the Collapsable's expanded state.

Properties

collapsable.collapsed

• boolean

Sets/Gets if a Collapsable is collapsed or not.

collapsable.expanded

• boolean

Sets/Gets if a Collapsable is expanded or not.

collapsable.sourceElement

• HTMLElement

Gets the source Element used to activate the Collapsable. read-only

collapsable.targetElement

• HTMLElement

Sets/Gets the target Element that will collapse/expand.

popoverComponentInstance.focusable

• boolean

Sets/Gets the focusable property that is driven by the data-focus attribute on the source element.

Variables

There are no variables for this component.

Themeability

Nothing is themeable in this component.