Accordions

Use accordions to provide a show/hide option for sections of content on complex pages.

  • Content:
    @import "../../../theme/assets/styles/sass/variables-import";
    @import "../../../theme/assets/styles/sass/tools/focus.placeholder";
    
    .ontario-accordions__container {
        max-width: 48rem;
        width: 100%;
    }
    
    .ontario-accordion {
        border-top: 2px solid $ontario-greyscale-20;
    
        &:last-of-type {
            border-bottom: 2px solid $ontario-greyscale-20;
        }
    }
    
    .ontario-accordion__controls {
        display: flex;
        justify-content: flex-end;
    }
    
    .ontario-accordion__button,
    .ontario-accordion__button--expand-all {
        background: none;
        border: 0;
        box-sizing: border-box;
    }
    
    .ontario-accordion__button--expand-all {
        font-size: 1rem;
        margin-bottom: $spacing-2;
        color: $ontario-colour-link;
        cursor: pointer;
    
        &:focus,
        &:hover {
            color: $ontario-colour-link--hover;
            text-decoration: underline;
        }
    
        &:focus {
            @extend %ontario-focus;
        }
    
        &:active {
            color: $ontario-colour-link--active;
            text-decoration: underline;
        }
    }
    
    .ontario-accordion--expand-close-all {
        display: none;
    }
    
    .ontario-accordion__controls--active {
        .ontario-accordion--expand-close-all {
            display: block;
        }
    
        .ontario-accordion--expand-open-all {
            display: none;
        }
    }
    
    .ontario-accordion__button {
        display: flex;
        align-items: flex-start;
    
        color: $ontario-colour-link;
        cursor: pointer;
        padding: $spacing-3 $spacing-2;
        text-align: left;
        width: 100%;
    
        p,
        h2,
        h3,
        h4,
        h5,
        h6 {
            @extend %h4-styles;
            margin-bottom: 0;
        }
    
        .ontario-accordion__button-icon--close,
        .ontario-accordion__button-icon--open {
            margin-right: $spacing-2;
        }
    
        .ontario-icon {
            width: 1.75rem;
            height: 1.75rem;
        }
    
        &:focus,
        &:hover {
            background-color: $ontario-greyscale-5;
            color: $ontario-colour-link--hover;
        }
    
        &:focus {
            @extend %ontario-focus;
            box-shadow: 0 0 0 4px $ontario-colour-focus inset;
        }
    
        &:active {
            color: $ontario-colour-link--active;
        }
    }
    
    .ontario-accordion__content {
        display: none;
        padding: $spacing-3 $spacing-3 $spacing-6 $spacing-3;
        margin-left: 0;
    
        @media screen and (min-width: $small-breakpoint) {
            margin-left: $spacing-6;
        }
    
        * {
            margin-top: 0;
            max-width: 48rem;
            width: 100%;
        }
    
        ul,
        ol {
            max-width: calc(100% - 3rem);
        }
    
        & > :last-child {
            margin-bottom: 0;
        }
    }
    
    .ontario-expander--active {
        .ontario-accordion__content,
        .ontario-accordion__button-icon--close {
            display: block;
        }
    
        .ontario-accordion__button-icon--open {
            display: none;
        }
    }
    
    .ontario-accordion__button-icon--close {
        display: none;
    }
    
  • URL: /components/raw/accordions/accordions.scss
  • Filesystem Path: fractal/components/components/accordions/accordions.scss
  • Size: 2.8 KB
  • Content:
    .ontario-accordion__button p,.ontario-accordion__button h2,.ontario-accordion__button h3,.ontario-accordion__button h4,.ontario-accordion__button h5,.ontario-accordion__button h6{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button p,.ontario-accordion__button h2,.ontario-accordion__button h3,.ontario-accordion__button h4,.ontario-accordion__button h5,.ontario-accordion__button h6{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0}@media screen and (min-width: 40em){.ontario-accordion__button p,.ontario-accordion__button h2,.ontario-accordion__button h3,.ontario-accordion__button h4,.ontario-accordion__button h5,.ontario-accordion__button h6{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordion__button:focus,.ontario-accordion__button--expand-all:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%}.ontario-accordion__button p,.ontario-accordion__button h2,.ontario-accordion__button h3,.ontario-accordion__button h4,.ontario-accordion__button h5,.ontario-accordion__button h6{margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:#f2f2f2;color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-expander--active .ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-accordion__button-icon--close{display:none}
  • URL: /components/raw/accordions/accordions.css
  • Filesystem Path: fractal/components/components/accordions/accordions.css
  • Size: 3.4 KB

Guiding principle: Start simple.

When to use this component

Test your content without an accordion first. Instead of an accordion, consider if there’s opportunity to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a list of links as a table of contents to let users navigate quickly to specific sections of content (“On this page” navigation)

Accordions can be an effective design choice in some scenarios:

  • To give users an overview of multiple, related sections of content
  • To present users with a choice between mutually exclusive categories
  • To include content that doesn’t apply to most users (for example, additional details not needed to accomplish the main task)

When not to use this component

Do not use an accordion for content that is essential to all users. Accordions hide content from users and prevent it from being found with in-page (CTRL-F) search. Some users will not notice accordions or understand how they work.

If the majority of users will need the content to accomplish the main task, show all the content without accordions, even if doing so results in a longer page. If users will need to open the majority of subtopics to have their questions answered or to get the full story, then an accordion is not the way to go.


Best practices

Do:

  • use clear labels. When writing link text for accordion toggles:
    • Use short and descriptive language
    • Make sure the user understands what they’ll see before they click
    • Ensure each section is clearly differentiated from the other sections
    • Avoid vague or generic labels (for example, “more resources”)

Do not:

  • have accordions open by default
  • hide sections of forms within accordions

Forms

Accordions are specific to content pages. To present expandable hints within forms, use a hint expander instead.


Technical specifications

Technical note

The accordion requires the following Javascript:

In order for the JS to work with the above script, the accordion structure, classes and data-toggle attributes must be included/written according to the example.

Accessibility

Accordion button

Buttons are used as the accordion control so that they can be tabbed by keyboard users and therefore accessible to screen readers. The button requires three attributes to pass accessibility requirements:

  • An id that corresponds to the aria-labelledby value for the accordion content, to associate the content with the accordion expander button.
  • An aria-expanded attribute initially set to false, which toggles to true when the accordion content is expanded.
  • An aria-controls attribute that is associated with the content container id, to denote that the button has control over and affects the accordion content.

Accordion content container

The accordion content container requires three attributes to pass accessibility requirements:

  • An id that corresponds to the aria-controls for each button.
  • An aria-hidden attribute initially set to true, which switches to false when the accordion content is expanded and therefore visible.
  • An aria-labelledby value that corresponds with the accordion button.

Linking to accordion content

The ontario-collapse-expand script also includes functionality to open specific accordions through other links. For this to work, the links need a class name of ontario-accordion-link with an href value that points to an id added to the respective ontario-accordion container.


Help improve this page

If you have other suggestions or advice or any questions on buttons, the design system team would love to hear from you.