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 '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/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.8 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

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”)

Don’t:

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:

/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.