Accordion

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 the content associated with that item
accordion bar 1

your content 1

accordion bar 2

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

accordion bar 3

your content 3


Usage

Use this code snippet to any part of your project, please ensure you have included sgds.js for it to work.

<div class="sgds-accordion">
    <div class="sgds-accordion-set">
        <a class="sgds-accordion-header">
            <h5>Title 1</h5> <i class="sgds-icon sgds-icon-chevron-down"></i>
        </a>
        <div class="sgds-accordion-body">
            your content 1
        </div>
    </div>
    <div class="sgds-accordion-set">
        <a class="sgds-accordion-header">
            <h5>Title 2</h5> <i class="sgds-icon sgds-icon-chevron-down"></i>
        </a>
        <div class="sgds-accordion-body">
            your content 2
        </div>
    </div>
    <div class="sgds-accordion-set">
        <a class="sgds-accordion-header">
            <h5>accordion bar 3</h5> <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

Feedback

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

Tell us more