Skip to Main Content
You are now in the main content area

Accordion Component

Accordions shorten page length, reduce scrolling and visual clutter. Using a series of stacked panels, content is hidden until the user selects a specific panel.  

  • Found in Side Panel > Components > Accordion
  • One style only
  • No custom colours applied
  • Anchor links available
  • Tab components should not be added to the accordion

Sample accordion:

  • Criminology
  • Criminology and History Double Major
  • Criminology and Politics and Governance Double Major
  • Criminology and Sociology Double Major
  • Minors
  • Optional Specialization
  • Concentrations
  • Liberal Studies Tables
  • Open Electives

Zone Learning is a new model of experiential learning built to allow students to apply their degree coursework to real world startups, causes, companies, projects or ventures

How to use the accordion

  1. Open page, select the side panel icon (opens in new window) 
  2. Locate Components > Accordion
  3. Drag Accordion onto page
    • Alternatively, in "Drag component here" space in open page, select the "+"  and add Accordion from search/dropdown

Add panel titles

  1. Double click top of component, or select wrench icon
  2. Choose display options:
    • Keep one section open at a time (always enabled in author)
    • Close all sections initially (one section will always be visible in author)
    • Show Open All/Close All Buttons (only visible on live site)
  3. Select "Add" button for each panel title
    • NB: Remove panels by selecting the trash can icon
  4. After all panels are created, select the check mark in top right corner
 (image file) 

Add content to panels

Under each panel title, a text component is available by default. Use this component or drag and drop another component under the panel title.   

Switching panels 

  1. Select the accordion to reveal toolbar
  2. To move to next panel, select the arrow -->
  3. To open ALL panels for editing, select the stacked arrows

 Creating anchor links to individual panels  

  1. In the accordion component toolbar, select "Copy Anchors" 
  2. Then select "Copy Anchor" of chosen panel
  3. Select OK
  4. Go to component where link is required, and "paste" the copied anchor link into a path field


Related: Accordions on desktop: When and How to Use (Source: Nielsen Norman)