Toronto District School Board
Skip to main content

Accordion

Accordions are used for condensing content on a webpage into a smaller area. They display one line of text which people can click on to see all of the information they contain.

When to Use this Module

Accordions should be used when you want to condense written or visual content so that it is not immediately displayed in full to the user.

This is especially useful for content that may not be relevant to all visitors to a particular page, but is still required to be displayed in some way.

Some examples of where accordions can be used include:

  • Frequently Asked Questions pages/sections
  • Displaying information for specific groups (Elementary School students vs. Secondary School students)
  • Date-specific content (minutes or agendas for specific meetings)

How to Use this Module

  1. Add the module to the page
  2. Click the pencil icon and go into the "Edit" mode
  3. Click "New" button to add new accordion item
    1. Enter the title and body. Start and End dates are optional
    2. Click "Save" button to save and add the accordion item
  4. While in the "Edit" mode, each accordion item has "Edit", "Delete" and "Up/Down" buttons, and label for scheduled/expired items. These are only visible while in the "Edit" mode.
Sample Accordion

This is the body of the accordion.

It can have table too.

Column 1 Column 2
Data 1 Value 1
Data 2 Value 2