Accordion

Some features from this component may require sgds.js

Overview

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


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>

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>

When you should use this component

You should use the accordion component if there is insufficient space within the page to display the information or if users need to see a overview of specific content that's related to one another.

When you should consider something else

Accordions hide content from the user, and there may be cases where users will miss content completely or not understand how accordions work. It is not advisable to use the accordion for information that is essential to your users.

If users need to see all information on a single page, you may want to:

  • reduce content
  • use well-formatted text instead which give clear distinction between headers, content and sections.
  • have essential information split up into smaller sections that can be displayed on a single page

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.


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