Accordions

Skip to main guidance


        
        <h2>Accepted identity documents</h2>
<div class='ontario-accordions__container'>
    <div class='ontario-accordion__controls'>
        <button class='ontario-accordion__button--expand-all' aria-expanded='false'>
            <span class='ontario-accordion--expand-open-all'>Expand all</span>
            <span class='ontario-accordion--expand-close-all'>Collapse all</span>
        </button>
    </div>
    <div class='ontario-accordion' id='accordion-1'>
        <h3 class='ontario-accordion-heading'>
            <button class='ontario-accordion__button' id='accordion-button-id-1' aria-controls='accordion-content-1' aria-expanded='false' data-toggle='ontario-collapse'>
                <span class='ontario-accordion__button-icon--close'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-up"></use>
                    </svg>
                </span>
                <span class='ontario-accordion__button-icon--open'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-down"></use>
                    </svg>
                </span>
                Canadian Citizens
            </button>
        </h3>
        <section class='ontario-accordion__content' id='accordion-content-1' aria-labelledby='accordion-button-id-1' aria-hidden='true' data-toggle='ontario-expander-content'>
            <ul>
                <li>passport (Canadian or foreign)</li>
                <li>Canadian Citizenship Card with photo</li>
                <li>Secure Certificate of Indian Status Card (issued on or after December 15, 2009 by Indian and Northern Affairs Canada)</li>
                <li>Ontario Photo Card</li>
            </ul>
        </section>
    </div>
    <div class='ontario-accordion' id='accordion-2'>
        <h3 class='ontario-accordion-heading'>
            <button class='ontario-accordion__button' id='accordion-button-id-2' aria-controls='accordion-content-2' aria-expanded='false' data-toggle='ontario-collapse'>
                <span class='ontario-accordion__button-icon--close'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-up"></use>
                    </svg>
                </span>
                <span class='ontario-accordion__button-icon--open'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-down"></use>
                    </svg>
                </span>
                Permanent Residents
            </button>
        </h3>
        <section class='ontario-accordion__content' id='accordion-content-2' aria-labelledby='accordion-button-id-2' aria-hidden='true' data-toggle='ontario-expander-content'>
            <ul>
                <li>Permanent Resident (PR) Card</li>
                <li>Record of Landing (IMM 1000)</li>
                <li>Confirmation of Permanent Residence (IMM 5292) accompanied by a valid passport from country of origin</li>
                <li>Ontario Photo Card</li>
            </ul>
        </section>
    </div>
    <div class='ontario-accordion' id='accordion-3'>
        <h3 class='ontario-accordion-heading'>
            <button class='ontario-accordion__button' id='accordion-button-id-3' aria-controls='accordion-content-3' aria-expanded='false' data-toggle='ontario-collapse'>
                <span class='ontario-accordion__button-icon--close'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-up"></use>
                    </svg>
                </span>
                <span class='ontario-accordion__button-icon--open'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-down"></use>
                    </svg>
                </span>
                Temporary Residents
            </button>
        </h3>
        <section class='ontario-accordion__content' id='accordion-content-3' aria-labelledby='accordion-button-id-3' aria-hidden='true' data-toggle='ontario-expander-content'>
            <ul>
                <li>Study Permit / Student Authorization (IMM 1442)</li>
                <li>Work Permit / Employment Authorization (IMM 1442)</li>
                <li>Visitor Record (IMM 1442)</li>
                <li>Temporary Resident Permit (IMM 1442)</li>
                <li>Refugee Status Claim (IMM 1434)</li>
                <li>Acknowledgement of Intent to Claim Refugee Status (IMM 7703) with photo</li>
                <li>Report Pursuant to the Immigration Act (IMM 1442) with photo</li>
                <li>Ontario Photo Card</li>
            </ul>
        </section>
    </div>
</div>

<script src='../../scripts/ontario-expand-collapse.js'></script>

Content:


                                @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;

.ontario-accordions__container {
	max-width: globalVariables.$standard-width;
	width: globalVariables.$full-width;
}

.ontario-accordion {
	border-top: 2px solid colours.$ontario-greyscale-20;

	&:last-of-type {
		border-bottom: 2px solid colours.$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: fontSizes.$ontario-font-size-standard-body-text;
	margin-bottom: spacing.$spacing-2;
	color: colours.$ontario-colour-link;
	cursor: pointer;

	&:focus,
	&:hover {
		color: colours.$ontario-colour-link--hover;
		text-decoration: underline;
	}

	&:focus {
		@extend %ontario-focus;
	}

	&:active {
		color: colours.$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: colours.$ontario-colour-link;
	cursor: pointer;
	padding: spacing.$spacing-3 spacing.$spacing-2;
	text-align: left;
	width: globalVariables.$full-width;
	@extend %h4-styles;
	margin-bottom: spacing.$spacing-0;

	.ontario-accordion__button-icon--close,
	.ontario-accordion__button-icon--open {
		margin-right: spacing.$spacing-2;
	}

	.ontario-icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	&:focus,
	&:hover {
		background-color: colours.$ontario-greyscale-5;
		color: colours.$ontario-colour-link--hover;
	}

	&:focus {
		@extend %ontario-focus;
		box-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;
	}

	&:active {
		color: colours.$ontario-colour-link--active;
	}
}

.ontario-accordion__content {
	display: none;
	padding: spacing.$spacing-3 spacing.$spacing-3 spacing.$spacing-6 spacing.$spacing-3;
	margin-left: spacing.$spacing-0;

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		margin-left: spacing.$spacing-6;
	}

	* {
		margin-top: spacing.$spacing-0;
		max-width: globalVariables.$standard-width;
		width: globalVariables.$full-width;
	}

	ul,
	ol {
		max-width: calc(100% - spacing.$spacing-8);
	}

	& > :last-child {
		margin-bottom: spacing.$spacing-0;
	}
}

.ontario-accordion__button-icon--close,
.ontario-expander--active .ontario-accordion__button-icon--open {
	display: none;
}

.ontario-expander--active ~ .ontario-accordion__content,
.ontario-expander--active .ontario-accordion__button-icon--close {
	display: block;
}

.ontario-accordions__container {
	.ontario-h1,
	.ontario-h2,
	.ontario-h3,
	.ontario-h4,
	.ontario-h5,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: spacing.$spacing-0;
	}
}

URL: /components/raw/accordions/accordions.scss
Filesystem Path: fractal/components/components/accordions/accordions.scss
Size: 3.7 KB

Content:


                                .ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-accordion__button{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{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.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%;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-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}

URL: /components/raw/accordions/accordions.css
Filesystem Path: fractal/components/components/accordions/accordions.css
Size: 3.2 KB

Guiding principle: Start simple.

When to use this component

Accordions can be an effective design choice when content needs to be hidden to help users focus on what is relevant to them.

Use accordions when:

you need to present users with a choice of content, but there is only one option that applies to their situation.

Mutually exclusive
you want to include content that applies to most users but only a few people need (for example, extra details not needed to accomplish the main task).

Supplementary or secondary information

Before you use this component, test your content without accordions. While accordions may simplify the page, they also hide information. When most of the page content is hidden, it may give the impression that there is nothing important to be found there.

Instead of an accordion, consider if there’s opportunity to:

simplify and reduce the amount of content
split content across multiple pages
separate content using headings
use the in-page navigation component to let users navigate quickly to specific sections of content

When not to use this component

Do not use accordions:

for content that is essential to all users
to shorten long content pages
for help pages or frequently asked questions
in web forms

Accordions hide content from users and prevent it from being found with in-page (CTRL-F/CMD+F) search. Some users will not notice accordions or understand how they work.

Example of how CTRL-F and Find in page searches can miss words in closed accordions.

If the majority of users need the information on the page to accomplish the main task, show all the content without accordions and link to each section using the in-page navigation component, even if this 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 do not use an accordion.

Alternatives to accordions in web forms

Accordions are specific to content pages. There are ways to streamline your web form without using accordions:

use a hint expander to present expandable hints within web forms
reveal certain questions if and when they are relevant to a user’s situation
break the questions down into one question per page or smaller sections to make it less overwhelming and help the user focus

Best practices

Do:

use clear, short and descriptive labels
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”)

Don’t:

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

Technical specifications

Technical note

The accordion requires the following Javascript:

/scripts/ontario-expand-collapse.js

For the accordion to work with this script, the accordion structure, classes and data-toggle attributes must be included/written as shown in the example on this page.

The accordion code was developed as a sample to fit the needs of a static HTML page. You will need to customize the JavaScript code to fit within the constraints of your project.

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.

If you have any questions or feedback, please get in touch.