Accordion

Some features from this component may require sgds.js

An accordion is a component that allows users to show or hide related content.


Simple accordion
I have content below me

This is my accordion content

This is my accordion content

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

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.


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

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

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