Accordions

Uses

Accordions are used to group components under a header and give the user the ability to expand and collapse the grouped components. This is especially useful for keeping long forms digestable and easy to navigate.

Standard Content Accordion - Only one open at a time

Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
HTML
<div class="accordion-group">
    <div class="accordion-header collapsed needs-contrast">
        <div class="accordion-header-title"><a href="javascript:void(0);">Section Header</a></div>
    </div>
    <div class="accordion-content">
        <span>Any content here.</span>
    </div>
</div>

"Multi" Content Accordion - More than one open at a time

Frequently consider the connexion of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connexion of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connexion of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connexion of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connexion of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connexion of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
HTML
<div class="accordion-group multi">
    <div class="accordion-header collapsed needs-contrast">
        <div class="accordion-header-title"><a href="javascript:void(0);">Section Header</a></div>
    </div>
    <div class="accordion-content">
        <span>Any content here.</span>
    </div>
</div>

Borderless Content Accordion

Borderless accordions should be used when actions a user takes inside a drawer are consequential to elements in view outside of the accordion itself. That is, when users need to interact with an accordion and content directly related to the accordion simultaneously. Only one drawer is open at a time.

Contains actions consequential to elements in view outside of this drawer.
Contains actions consequential to elements in view outside of this drawer.
This panel is affected by actions made in the borderless accordion drawer.
HTML
<div class="accordion-group">
    <div class="accordion-header collapsed needs-contrast">
        <div class="accordion-header-title"><a href="javascript:void(0);">Section Header</a></div>
    </div>
    <div class="accordion-content no-border">
        <span>Any content here.</span>
    </div>
</div>

Form Content Accordion - Edit

HTML
<div class="accordion-header edit collapsed needs-contrast">
    <div class="accordion-header-title">Form Section</div>
</div>
<div class="accordion-content">
    <span>Any content here.</span>
</div>

Form Content Accordion - Sortable

HTML
<ul class="accordion ui-sortable">
    <li class="accordion-move-wrapper">
        <div class="accordion-header checkbox move edit collapsed needs-contrast">
            <div class="accordion-header-title">Sortable & Edit 1</div>
        </div>
        <div class="accordion-content">
            <span>Any content here.</span>
        </div>
    </li>
    <li class="accordion-move-wrapper">
        <div class="accordion-header checkbox move edit collapsed needs-contrast">
            <div class="accordion-header-title">Sortable & Edit 2</div>
        </div>
        <div class="accordion-content">
            <span>Any content here.</span>
        </div>
    </li>
</ul>
Javascript
$(document).ready(function() {
    $("ul.accordion.ui-sortable").sortable({
        handle: ".move-span",
        update: function(e, ui) {
            //Your Update Logic Here
        }
    });
});

Standard Content Accordion With Status Icons

Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
Frequently consider the connection of all things in the universe and their relation to one another. For in a manner all things are implicated with one another, and all in this way are friendly to one another; for one thing comes in order after another, and this is by virtue of the active movement and mutual conspiration and the unity of the substance.
HTML
<div class="row accordions-with-status accordion-group">
    <div class="accordion-header collapsed needs-contrast">
        <div class="accordion-header-title"><a href="javascript:void(0);">Section Header</a></div>
    </div>
    <div class="accordion-content">
        <span>Any content here.</span>
    </div>
    <div class="accordion-header collapsed needs-contrast complete">
        <div class="accordion-header-title"><a href="javascript:void(0);">Section Header</a></div>
    </div>
    <div class="accordion-content">
        <span>Any content here.</span>
    </div>
    <div class="accordion-header collapsed needs-contrast not-actionable">
        <div class="accordion-header-title"><a href="javascript:void(0);">Section Header</a></div>
    </div>
    <div class="accordion-content">
        <span>Any content here.</span>
    </div>
</div>

Adding Accordions at Runtime

Accordions that are added before runtime will be initialized automatically. If you need to dynamically add accordions at runtime, you must initialize them using function

Javascript
initAccordions();

Once an accordion is initialized (either on page load, or via the initAccordions() function) an additional "initialized" class will appear on the accordion-header. This used to avoid re-initializing accordions when calling initAccordions() at runtime.