Accordion

Ready Added in 2.0.0

Create a list of items that can be shown individually by clicking an item's header.

Usage

The Accordion component consists of a parent container with the gls-accordion attribute, and a title and content part for each accordion item.

Class Description
.gls-accordion-title Defines and styles the toggle for each accordion item. Use <a> elements.
.gls-accordion-content Defines the content part for each accordion item. 
<ul gls-accordion>
    <li>
        <a class="gls-accordion-title" href="#"></a>
        <div class="gls-accordion-content"></div>
    </li>
</ul>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul gls-accordion>
    <li class="gls-open">
        <a class="gls-accordion-title" href="#">Item 1</a>
        <div class="gls-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 2</a>
        <div class="gls-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 3</a>
        <div class="gls-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Guidelines

When to use

  • Combining a set of content with expand and collapse functionality.
  • Allowing a user to hide controls and content so they can better focus on their task.

When to use something else

  • Providing an introductory element to a set of content which doesn’t need expand and collapse functionality.
  • Creating a set of visibly contained content which doesn’t need expand and collapse functionality. Instead, use a Module Container.

Microcopy notes

  • Keep titles to five words, if possible, to avoid wrapping.

Style modifiers

Gloss includes a modifier that can be used to change the color of the dividers.

<ul class="gls-accordion-primary" gls-accordion>
    <li>
        <a class="gls-accordion-title" href="#"></a>
        <div class="gls-accordion-content"></div>
    </li>
</ul>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul class="gls-accordion-primary" gls-accordion="collapsible: false">
    <li>
        <a class="gls-accordion-title" href="#">Item 1</a>
        <div class="gls-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 2</a>
        <div class="gls-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 3</a>
        <div class="gls-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

No collapsing

By default, all accordion items can be collapsed. To prevent this behavior and always maintain one open item, add the collapsible: false option to the attribute.

<ul gls-accordion="collapsible: false">...</ul>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul gls-accordion="collapsible: false">
    <li>
        <a class="gls-accordion-title" href="#">Item 1</a>
        <div class="gls-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 2</a>
        <div class="gls-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 3</a>
        <div class="gls-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Multiple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the multiple: true option to the gls-accordion attribute.

<ul gls-accordion="multiple: true">...</ul>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul gls-accordion="multiple: true">
    <li class="gls-open">
        <a class="gls-accordion-title" href="#">Item 1</a>
        <div class="gls-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 2</a>
        <div class="gls-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 3</a>
        <div class="gls-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Set open items

To specify which items should be opened initially, add the .gls-open class to the item. You can also use this to open multiple items. Just make sure to add the option multiple: true to the gls-accordion attribute.

Note Alternatively, you can open a single item by adding the active: <index> option to the gls-accordion attribute, e.g. active: 1 to show the second element (the index is zero-based). Note that this will overwrite the gls-open class.

<ul gls-accordion>
    <li></li>
    <li class="gls-open"></li>
    <li></li>
</ul>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul gls-accordion>
    <li>
        <a class="gls-accordion-title" href="#">Item 1</a>
        <div class="gls-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="gls-open">
        <a class="gls-accordion-title" href="#">Item 2</a>
        <div class="gls-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="gls-accordion-title" href="#">Item 3</a>
        <div class="gls-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
active Number false Index of the element to open initially.
animation Boolean true Reveal item directly or with a transition.
collapsible Boolean true Allow all items to be closed.
content String > .gls-accordion-content The content selector, which selects the accordion content elements.
duration Number 200 Animation duration in milliseconds.
multiple Boolean false Allow multiple open items.
targets String > * CSS selector of the element(s) to toggle.
toggle String > .gls-accordion-title The toggle selector, which toggles accordion items.
transition String ease The transition to use when revealing items. Use keyword for easing functions.
offset Number 0 Pixel offset added to scroll top.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.accordion(element, options);

Events

The following events will be triggered on elements with this component attached:

Name Description
beforeshow Fires before an item is shown. Can prevent showing by calling preventDefault() on the event.
show Fires after an item is shown.
shown Fires after the item’s show animation has completed.
beforehide Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hide Fires after an item’s hide animation has started.
hidden Fires after an item is hidden.

Methods

The following methods are available for the component:

Toggle

Gloss.accordion(element).toggle(index, animate);

Toggles the content pane.

Name Type Default Description
index String, Number, Node 0 Accordion pane to toggle. 0 based index.
animate Boolean true Suppress opening animation by passing false.