Accordion

Some features from this component may require sgds.js

Overview

Accordions are interactive elements that allow users to either show or hide related content, through a dropdown mechanism.


Types

1) Simple accordion

I have content below me

This is my accordion content

This is my accordion content

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

2) Accordion set

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

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

your content 1

accordion bar 2

This is an example of a open section

your content 3

<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>This is an example of a open section</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>

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.


When to use

Accordions should be used when:
  • There is insufficient space within the page to display the necessary information.
  • Users require an overview of specific content that’s related to one another.
Accordions should not be used when:
  • They contain information that is essential to your users.
    • Accordions hide content, and there may be users who may miss the content or not understand how accordions work.
    • If users need to see all information in a single page, you can consider reducing your content, splitting them into smaller sections, or use well-formatted text (e.g. headers, contents, section)

Accordions increases the cognitive load for users, as decisions have to be made when clicking on the headers. Users may also ignore important information if it is hidden in an accordion.


Feedback

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

Chat with the team