Accordions | Ontario Institute for Studies in Education

Using Accordions - Tips & Guidelines

Accordions help simplify crowded web pages, which can be overwhelming for visitors. Clicking on an accordion reveals or hides its content, allowing visitors to find what matters to them quickly. For example, they are handy for organizing frequently asked questions (FAQs) or program details.

When to use Accordions:

When users need only a few pieces of information on the page. Hiding most of the content on the page helps users spend their time more efficiently by focusing on what’s important.
When information in each section is independent, and visitors don't need to access multiple sections at once.

When to Avoid Accordions

When users need to click on most accordion items. If users have to open most items, it's better to show all the content simultaneously. This way, users won't struggle with deciding what to click on, making accessing essential information easier.
When there is little content on the page, accordions make the page look empty and give the impression that there is little valuable information on the page.

Tips & Guidelines

Split accordion menus into smaller sections if they have over fifteen items. Please refer to the Frequently Asked Questions webpage to understand how to divide larger accordions using headers.

One Column (Grey)

Accordion Item

Accordion Item with Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et congue dolor. Praesent aliquet bibendum lectus id varius. Nunc placerat leo sodales purus aliquam tempus. Nunc porttitor sem sit amet purus sollicitudin, a rutrum velit bibendum. Cras sed lacinia justo. Vivamus eget diam urna. Aliquam et nibh id enim posuere placerat. Quisque posuere nulla erat, ac hendrerit turpis feugiat id. Maecenas lacinia nunc eget scelerisque maximus. Maecenas sollicitudin nisi eget ante mattis fermentum. Aliquam venenatis, metus ac viverra maximus, ex orci tempus turpis, eget tristique velit odio id tortor. Fusce sapien urna, iaculis ac fermentum nec, mattis nec orci. Quisque metus purus, ullamcorper vitae sodales sit amet, tempus imperdiet neque. Phasellus imperdiet eros nec mollis aliquam. Cras at auctor neque.

Accordion Item with Button (CTA)

Button Linking back to OISE Homepage

Accordion Item with Link (Primary Button)

Primary Button Linking Back to OISE Homepage

Accordion Item with Link (Secondary Button)

Secondary Button Linking Back to OISE Homepage

Accordion Item with Video