The accordions are used when you wanted to show users limited information until the user expands an accordion an element

Below you will find the different definitions and options to create an accordion component

Table of contents

Overview

Global Definition

Each expanding component is based on a global CSS class called "msds-accordion". It is important to include this class first as this is the main HTML class of the component. Without this HTML class, you cannot utilize component.

Ensure that each accordion element input has an id and that the label for for that element has a matching for attribute

Input

 <input id="how-do-i-find-marketplace" type="checkbox"/>

Label

 <label for="how-do-i-find-marketplace">

There are 5 implementations of Accordions

The Default Expanding Accordions

• Default Accordion using checkboxes – the checkboxes allow multiple accordion elements to be open at any time.
• Accordion using radio buttons – the radio buttons only allow one accordion element to be open at any time.
• Accordions with an icon on the left side
• Accordions with a floating button on the left side
• Accordions as floating list items - used for navigation

Accordion using checkboxes

To use “expanding accordion” you need to add the following HTML class: "msds-accordion". The Accordion with checkboxes can have multiple accordions open at once.

<div class="msds-accordion">
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-1">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-1">
            <span class="msds-accordion__list-item-header-title">Accordion List Item 1 - Multiple List items Open At Any Time</span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-2">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-2">
            <span class="msds-accordion__list-item-header-title">Accordion List Checkbox Item 1 - Multiple List items Open At Any Time</span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
</div>

Accordion using radio buttons

To make use of accordions that can only have one element open at any time, change all the input types from checkbox to radio type=”checkbox” to type=”radio” name=”accordion”

<h1>Medium Accordion - Radio</h1>
<div class="msds-accordion">
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="radio" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-radio-1" name="accordion-with-radio">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-medium-radio-1">
            <span class="msds-accordion__list-item-header-title">Accordion List Item 1 - One Item Open At A Time</span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="radio" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-radio-2" name="accordion-with-radio">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-medium-radio-2">
            <span class="msds-accordion__list-item-header-title">Accordion List Item 2 - One Item Open At A Time</span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
</div>

Accordion large

To make use of large accordions, add the msds-accordion--large to the main component class="msds-accordion"

<div class="msds-accordion msds-accordion--large">
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-large-1">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-large-1">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-large-2">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-large-2">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
</div>

Accordion with an icon on the left

To make use of accordions that has an icon on the left add the class modifier msds-accordion__list-item-header--left-icon on the desired accordion label class="msds-accordion__list-item-header

   <label class="msds-accordion__list-item-header msds-accordion__list-item-header--left-icon">

<div class="msds-accordion">
    <div class="msds-accordion__list-item">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-1">
        <label class="msds-accordion__list-item-header
                         msds-accordion__list-item-header--left-icon" 
                for="accordion-list-item_overview-medium-icon-left-1">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <span class="msds-btn-floating">
                    <svg class="msds-icon">
                        <use href="../../../msds-spritemap.svg#knowledgebase"></use>
                    </svg>
                </span>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
  <div class="msds-accordion__list-item">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-2">
        <label class="msds-accordion__list-item-header
                         msds-accordion__list-item-header--left-icon" 
                for="accordion-list-item_overview-medium-icon-left-2">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 2 </span>
            <span class="msds-accordion__list-item-header-icon">
                <span class="msds-btn-floating">
                    <svg class="msds-icon">
                        <use href="../../../msds-spritemap.svg#demo"></use>
                    </svg>
                </span>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
</div>

Accordion with an icon on the left floating

To make use of accordions that has an icon on the left with a floating button add the class modifier on the component class="msds-accordion msds-accordion--floating-list-item" along with msds-accordion__list-item-header--left-icon on the desired accordion label class="msds-accordion__list-item-header

<div class="msds-accordion msds-accordion--floating-list-item"></div>

<div class="msds-accordion msds-accordion--floating-list-item"></div>

Accordion with an icon on the left floating dark yellow

To make use of accordions that has an icon on the left with a floating button in a dark theme add the class modifier on the component class="msds-accordion msds-accordion--floating-list-item msds-accordion--dark-yellow"

<div class="msds-accordion msds-accordion--floating-list-item msds-accordion--dark-yellow">
    <div class="msds-accordion__list-item">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-1">
        <label class="msds-accordion__list-item-header 
                        msds-accordion__list-item-header--left-icon" 
               for="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-1">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <div class="msds-btn-floating">
                    <svg class="msds-icon msds-icon--unchecked">
                        <use href="../../../msds-spritemap.svg#knowledgebase"></use>
                    </svg>
                    <svg class="msds-icon msds-icon--checked">
                        <use href="../../../msds-spritemap.svg#cross"></use>
                    </svg>
                </div>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
      <div class="msds-accordion__list-item">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-2">
        <label class="msds-accordion__list-item-header 
                        msds-accordion__list-item-header--left-icon" 
               for="accordion-list-item_overview-medium-icon-left-floating-dark-yellow-2">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 2 </span>
            <span class="msds-accordion__list-item-header-icon">
                <span class="msds-btn-floating">
                    <svg class="msds-icon msds-icon--unchecked">
                        <use href="../../../msds-spritemap.svg#demo"></use>
                    </svg>
                    <svg class="msds-icon msds-icon--checked">
                        <use href="../../../msds-spritemap.svg#cross"></use>
                    </svg>
                </span>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
</div>

Accordion filtered list items

To make use of accordions with filtered list items is intended to be used for site navigation, to use the filtered list version of the accordion add the class modifier on the component class="msds-accordion msds-accordion--filter-list-item"

<div class="msds-accordion msds-accordion--filter-list-item">
    <div class="msds-accordion__list-item 
                    msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-as-filter">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-medium-as-filter">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
    <div class="msds-accordion__list-item 
                    msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-medium-as-filter2">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-medium-as-filter2">
            <span class="msds-accordion__list-item-header-title">Accordion List Overview Item 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
</div>

Accordion disabled

To make use of the accordion with a disabled list item, append a disabled attribute to the msds-accordion__list-item-input element

<div class="msds-accordion">
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-disabled" disabled>
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-disabled">
            <span class="msds-accordion__list-item-header-title">Accordion Disabled 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 1 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
    <div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
        <input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_overview-enabled">
        <label class="msds-accordion__list-item-header" for="accordion-list-item_overview-enabled">
            <span class="msds-accordion__list-item-header-title">Accordion Enabled 1 </span>
            <span class="msds-accordion__list-item-header-icon">
                <svg>
                    <use href="../../../msds-spritemap.svg#right-arrow" />
                </svg>
            </span>
        </label>
        <div class="msds-accordion__list-item-body">
            <div class="msds-accordion__list-item-subtitle">
                This is the Accordion List Item 2 long title
            </div>
            <div class="msds-accordion__list-item-description">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </span>
            </div>
        </div>
    </div>
</div>