Some features from this component may require sgds.js

The accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "stretched" to reveal its associated content.


Simple accordion
I have content below me

This is my accordion content

This is my accordion content

Usage
<div class="sgds-accordion is-open">
    <a href="#!" class="sgds-accordion-header is-active" role="button" aria-expanded="true">
        I have content below me <i class="sgds-icon sgds-icon-chevron-up"></i>
    </a>
    <div class="sgds-accordion-body">
        <p>This is my accordion content</p>
    </div>
</div>

<div class="sgds-accordion">
    <a href="#!" class="sgds-accordion-header" role="button" aria-expanded="false">
        I also have content below me <i class="sgds-icon sgds-icon-chevron-down"></i>
    </a>
    <div class="sgds-accordion-body">
        <p>This is my accordion content</p>
    </div>
</div>

Accordion set

A set of accordions, of which only one can be open at a time.

your content 1

accordion bar 2

You can add the is-open class to sgds-accordion to show the content on page load

your content 3

Usage
<div class="sgds-accordion-set">
    <div class="sgds-accordion">
        <a href="#!" class="sgds-accordion-header" role="button" aria-expanded="false">
            accordion bar 1 <i class="sgds-icon sgds-icon-chevron-down"></i>
        </a>
        <div class="sgds-accordion-body">
            <p>your content 1</p>
        </div>
    </div>
    <div class="sgds-accordion is-open">
        <a class="sgds-accordion-header is-active" role="button" aria-expanded="true">
            accordion bar 2 <i class="sgds-icon sgds-icon-chevron-up"></i>
        </a>
        <div class="sgds-accordion-body">
            <p>You can add the <code>is-open</code> class to <code>sgds-accordion</code> to show the content on page load</p>
        </div>
    </div>
    <div class="sgds-accordion">
        <a class="sgds-accordion-header" role="button" aria-expanded="false">
            accordion bar 3 <i class="sgds-icon sgds-icon-chevron-down"></i>
        </a>
        <div class="sgds-accordion-body">
            <p>your content 3</p>
        </div>
    </div>
</div>

Guidelines

Accordion should:

  • Use only when there is enough content to condense
  • Avoid nested accordions as it increases the cognitive load for users
  • Have multiple accordions open at the same time

Style
Modifier Description
sgds-accordion is-*color*

Replace *color* with contextual text color classes (is-danger, is-warning, is-success etc.) for various background color.

sgds-accordion is-borderless Remove border around the accordion.
sgds-accordion is-open

To expand the accordion on page load.

sgds-accordion is-*size*

Replace *size* with is-small, is-medium & is-large for various text sizes.


Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team