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

I also have content below me

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

accordion bar 1

your content 1

accordion bar 2

This is an example of a open section

accordion bar 3

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.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component