Skip to main content
Are you okay? Emergency/Crisis UOIT Home

Accordion content

Accordion page example

Accordions - Elements used to expand and collapse blocks of content that are broken up into logical sections. Clicking on the heading will show/hide (toggle) the content associated with the heading.

One accordion consists of a heading (title) and its content. Multiple accordions make up an accordion group. Multiple accordion groups can also exist on a page, separated by an optional heading. 

Screenshot: accordion components


How to create an accordion:

  1. Create a new page or edit an existing page.
  2. In the Content type section of the page editor, select the Accordion content (toggled sections) option. The accordion editor will appear. 
  3. If you want multiple accordion groups on a page, click the green plus icon underneath the Accordion content (toggled sections) section label. This will create another accordion group editor section with one or more accordions editors (depending on how many accordions you had in the first group).  
    1. You can enter an optional heading in the Accordion group title field.
    2. If you want the first accordion in the group to be open/expanded when the page is first loaded, set the Open first accordion by default option to Yes.
  4. Enter the first accordion heading in the Accordion title field and the content for that accordion in the Accordion content WYSIWYG editor. 
  5. To create another accordion, click the green plus icon underneath the Accordion content (toggled sections) > Accordion section label. Another accordion editor will appear. Continue adding accordions as required. 
  6. You can reorder accordions by clicking on the navy upwards/downwards arrows for each accordion. Delete an accordion by clicking on the red minus icon.

Tip: expand and collapse individual accordion/accordion group sections as you are working in the page editor to minimize the visual clutter on the screen.