Morningstar Design System v2.16.0

Anatomy

Accordions are constructed using the Headers component, see the Headers page for all available variations. Use the content container to hold any other components or product markup.

Name	Required	Description
Header	Yes	Offers a title summarizing the content and affords functionality via optional actions. See Headers for all available variations.
Arrow	Yes	Acts as an affordance to indicate the functionality of the accordion, as well as a visual marker of the state of the accordion through its rotation and direction.
Content	Yes	Holds other components or product markup and is visually shown and hidden by interacting with the header.

Variations

Default

Use to provide expand and collapse functionality for a section of content.

Collapsed

Accordion Title

[Your content here.]

Expanded

Accordion Title

[Your content here.]

<div class="mds-accordion">
    <input id="label-header--29124" type="checkbox" role="button" aria-controls="mds-accordion-example--29124" class="mds-accordion__trigger" />
    <label for="label-header--29124" class="mds-accordion__label">
        <div class="mds-header mds-header--primary mds-header--level-5">
            <h2 class="mds-header__title"> Accordion Title <div class="mds-header__title-description">
                    <button class="mds-button mds-button--icon-only" type="button">
                        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#question-circle">
                            </use>
                        </svg>
                    </button>
                </div>
            </h2>
            <div class="mds-header__actions">
                <button class="mds-button mds-button--secondary" type="button"> Action </button>
            </div>
        </div>
    </label>
    <section class="mds-accordion__content" id="mds-accordion-example--29124">
        <p>[Your content here.]</p>
    </section>
</div>

Refer to Headers documentation for available variations and guidelines.
Apply Header modifier classes to control the border style and heading level of the contained Header.

Without Border

Use when omitting the contained Header’s border.

Collapsed

Accordion Title

[Your content here.]

Expanded

Accordion Title

[Your content here.]

<div class="mds-accordion">
    <input id="label-header--73465" type="checkbox" role="button" aria-controls="mds-accordion-example--73465" class="mds-accordion__trigger" />
    <label for="label-header--73465" class="mds-accordion__label">
        <div class="mds-header mds-header--level-5">
            <h2 class="mds-header__title"> Accordion Title <div class="mds-header__title-description">
                    <button class="mds-button mds-button--icon-only" type="button">
                        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#question-circle">
                            </use>
                        </svg>
                    </button>
                </div>
            </h2>
            <div class="mds-header__actions">
                <button class="mds-button mds-button--secondary" type="button"> Action </button>
            </div>
        </div>
    </label>
    <section class="mds-accordion__content" id="mds-accordion-example--73465">
        <p>[Your content here.]</p>
    </section>
</div>

Always omit Header border modifier classes from the contained header within this variation.

Bottom Border

Use when placing an accordion within a Module Container.

Collapsed

Accordion Title

[Your content here.]

Expanded

Accordion Title

[Your content here.]

<div class="mds-accordion doc-accordion-bottom-border">
    <input id="label-header--77785" type="checkbox" role="button" aria-controls="mds-accordion-example--77785" class="mds-accordion__trigger" />
    <label for="label-header--77785" class="mds-accordion__label">
        <div class="mds-header mds-header--primary mds-header--level-5 mds-header--border-bottom">
            <h2 class="mds-header__title"> Accordion Title <div class="mds-header__title-description">
                    <button class="mds-button mds-button--icon-only" type="button">
                        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#question-circle">
                            </use>
                        </svg>
                    </button>
                </div>
            </h2>
            <div class="mds-header__actions">
                <button class="mds-button mds-button--secondary" type="button"> Action </button>
            </div>
        </div>
    </label>
    <section class="mds-accordion__content" id="mds-accordion-example--77785">
        <p>[Your content here.]</p>
    </section>
</div>

Always include the mds-header--border-bottom modifier class on the Header within this variation.

Sizing

Follow the Headers sizing guidelines. An accordion’s arrow element will resize automatically to visually match the mds-header--level-[1–9] modifier class applied to the contained Header.

Examples

Accordion Within Module Container

This example shows an accordion placed within a Module Container and includes attributes establishing an accessible relationship between the two components.

MDS Features

Accordion uses the bottom border variation, hiding the contained Header’s bottom border when collapsed.
Header within the accordion uses the mds-header--border-bottom modifier class to restyle the header's border and internal padding for placement within a container.

Customizations

To meet accessibility requirements, some additional attributes must be added to the markup to establish a relationship between the Header and Module Container.

Add a unique id to the mds-header__title element.
Reference the id in an aria-labelledby attribute on the mds-module-container element.

Accordion Within Module Container

Accordion Title 1

The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.

<div class="mds-module-container" aria-labelledby="header-id-1">
    <div class="mds-accordion">
        <input id="label-header--93344" type="checkbox" role="button" aria-controls="mds-accordion-example--0003" class="mds-accordion__trigger" />
        <label for="label-header--93344" class="mds-accordion__label">
            <div class="mds-header mds-header--primary mds-header--level-5 mds-header--border-bottom">
                <h2 class="mds-header__title" id="header-id-1"> Accordion Title 1 </h2>
                <div class="mds-header__actions">
                    <button class="mds-button mds-button--secondary" type="button"> Action </button>
                </div>
            </div>
        </label>
        <section class="mds-accordion__content" id="mds-accordion-example--0003">
            <div class="accordion-sample-paragraph">
                <p>The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.</p>
            </div>
        </section>
    </div>
</div>

Stack of Accordions

This example shows a stack of accordions with stack space constants used to apply margin-bottom to each.

MDS Features

Uses the without border variation for the first accordion in the stack.

Customizations

To space out accordions vertically, apply stack space constants within your product’s code. For instance, this example:

Wraps all accordions in a <div> using the demo-accordion--stack class.
Applies the following styles to that class within your product’s SCSS:

.demo-accordion--stack {
    .mds-accordion {
        margin: $mds-space-stack-2-x;

        &:last-child {
            margin: 0;
        }
    }
}

Stack of Accordions

Accordion Title 1

The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.

Accordion Title 2

The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.

Accordion Title 3

The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.

<div class="demo-accordion--stack">
    <div class="mds-accordion">
        <input id="label-header--91669" type="checkbox" role="button" aria-controls="mds-accordion-example--91669" class="mds-accordion__trigger" />
        <label for="label-header--91669" class="mds-accordion__label">
            <div class="mds-header mds-header--primary mds-header--level-5">
                <h2 class="mds-header__title"> Accordion Title 1 </h2>
                <div class="mds-header__actions">
                    <button class="mds-button mds-button--secondary" type="button"> Action </button>
                </div>
            </div>
        </label>
        <section class="mds-accordion__content" id="mds-accordion-example--91669">
            <div class="accordion-sample-paragraph">
                <p>The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.</p>
            </div>
        </section>
    </div>
    <div class="mds-accordion">
        <input id="label-header--31641" type="checkbox" role="button" aria-controls="mds-accordion-example--31641" class="mds-accordion__trigger" />
        <label for="label-header--31641" class="mds-accordion__label">
            <div class="mds-header mds-header--primary mds-header--level-5">
                <h2 class="mds-header__title"> Accordion Title 2 </h2>
                <div class="mds-header__actions">
                    <button class="mds-button mds-button--secondary" type="button"> Action </button>
                </div>
            </div>
        </label>
        <section class="mds-accordion__content" id="mds-accordion-example--31641">
            <div class="accordion-sample-paragraph">
                <p>The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.</p>
            </div>
        </section>
    </div>
    <div class="mds-accordion">
        <input id="label-header--31622" type="checkbox" role="button" aria-controls="mds-accordion-example--31622" class="mds-accordion__trigger" />
        <label for="label-header--31622" class="mds-accordion__label">
            <div class="mds-header mds-header--primary mds-header--level-5">
                <h2 class="mds-header__title"> Accordion Title 3 </h2>
                <div class="mds-header__actions">
                    <button class="mds-button mds-button--secondary" type="button"> Action </button>
                </div>
            </div>
        </label>
        <section class="mds-accordion__content" id="mds-accordion-example--31622">
            <div class="accordion-sample-paragraph">
                <p>The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards.</p>
            </div>
        </section>
    </div>
</div>

Guidelines

Use When

Combining a set of content with expand and collapse functionality.
Allowing a user to hide controls and content so they can better focus on their task.

Don't Use When

Providing an introductory element to a set of content which doesn’t need expand and collapse functionality. Instead, use a Header.
Creating a set of visibly contained content which doesn’t need expand and collapse functionality. Instead, use a Module Container.

Visual Language

The arrow icon acts as an affordance to indicate the functionality of the accordion, as well as a visual marker of the state of the accordion through its rotation and direction.
When stacking multiple accordions, use stack space constants to add margin-bottom to the block element.

Do use the <a class="mds-link" href="/components/accordions.html#without-border">without border</a> variation to omit the border from the first accordion in a stack when it may conflict with other visual elements, like a <a class="mds-link" href="/components/module-containers.html">Module Container</a>. — Do use the without border variation to omit the border from the first accordion in a stack when it may conflict with other visual elements, like a Module Container.

Don‘t use a border to avoid unnecessary visual noise.

Behaviors

When an accordion expands and collapses only its height should change, its width should stay consistent.
Expand and collapse functionality should never be triggered on hover.

The expand and collapse functionality of an accordion is tied to the entire header of the component, with additional actions being triggered only by interaction within the bounds of their related UI components.

Interactive areas within an accordion.

Editorial

Keep titles to five words, if possible, to avoid wrapping.
Use title case and capitalize prepositions of four letters or more.

Accessibility

Follow the Header accessibility guidelines.
Always give the mds-accordion__content element a unique id and set it as the mds-accordion__trigger element’s aria-controls attribute. For example:

<input id="label-header--7410" type="checkbox" role="button" aria-controls="mds-accordion-example--0001" class="mds-accordion__trigger"> ... <section class="mds-accordion__content" id="mds-accordion-example--0001"> ...

Include the aria-expanded attribute on the mds-accordion__trigger element and write custom JavaScript to toggle its boolean value based on whether the accordion is expanded or collapsed. For example:

<!-- Collapsed State -->
<input id="label-header--7410" type="checkbox" role="button" aria-expanded="false" aria-controls="mds-accordion-example--0002" class="mds-accordion__trigger">...
<!-- Expanded State -->
<input id="label-header--7410" type="checkbox" role="button" aria-expanded="true" aria-controls="mds-accordion-example--0002" class="mds-accordion__trigger">...