You are now in the main content area

Accordion Layout Component

The accordion component is used as a layout tool and as an alternative to using the Tabs component. Using a series of stacked panels, page content is hidden until the user opens a panel  using the provided buttons.  

When to use: Long pages can benefit from the use of accordions. Accordions shorten pages and reduce scrolling. Source: Nielsen Norman Group, external link

  • Found in Sidekick> Layout> Accordion
  • One style only
  • No custom colours applied
  • Do not use tab components within the accordion component

Sample Accordions:

Each of the three sample accordions have different display options selected.

Accordion 1:

Sample text.

Sample text.

Sample text.

Accordion 2:

City councillor Kyle Rae (left) and president Claude Lajeunesse (right) celebrate Ryerson's 50th anniversary
Sample image
City councillor Kyle Rae (left) and president Claude Lajeunesse (right) celebrate Ryerson's 50th anniversary
Sample image
City councillor Kyle Rae (left) and president Claude Lajeunesse (right) celebrate Ryerson's 50th anniversary
Sample image

Accordion 3:

How to set up the accordion:

  1. Open page
  2. In Sidekick > Content > Layout, select "Accordion"
  3. Drag Accordion onto page
  4. Double-click to edit component
  5. Choose display options:
    • Keep one section open at a time
    • Close all sections initially
    • Show Open All/Close All Buttons
  6. Add Accordion Titles by clicking on "Add Item" [+]
  7. Remove items by clicking on [-]
  8. Move order of accordion panels by using the up and down arrows
  9. Click OK

Adding Content

Under each panel title, a text component is available by default; however, this component can be deleted. 

Most layout and content components can be dragged and dropped into each panel.

Use the +  and - icons to open and close panels.

 Do not use use tabs in accordion components.

How to link to an accordion panel

On the page where the accordion is located:

  • Hover over the accordion panel 
  • A blue "Copy Anchor" button will appear
  • Click on button to copy link
  • Message "Anchor Copied" will appear
  • Go to the page content where you want to add the link and paste copied link