More topics

Create a web accordion in CMS Lite

Last updated on January 9, 2024

The accordion tool allows content to be displayed in a stacked format on a web page.

On this page

Step-by-step guide

Accessibility guidelines for accordion use

Accordions should only be used on pages with large amounts of content that have been broken into sections.

Expand all | Collapse all

Accordions panels must be nested inside an accordion.

  • Accordions must be displayed with the Expand all | Collapse all links to meet accessibility standards.

Do not overuse accordions

Do not over-use this feature. They should only be used to make content dense pages more readable.  

  • Multiple accordions can be used on the same page
  • Do not use accordions in supplementary content boxes (previously called "Right column boxes)

Tutorial video

Watch a tutorial video to help you understand how to create and adjust accordions in CMS Lite.

Expand All | Collapse All
 

Work with accordions in CMS Lite

Step-by-step instructions for B.C. government content editors on how to create a web accordion using the CMS Lite application. Review the Web Style Guide for the most current information.

Create a web accordion in CMS Lite

 

Step-by-step guide

When using accordions:

  • Maximize the editing field to aid in rearranging panels, but save work first
  • Use browser refresh or zoom adjustments if the toolbar disappears, but try to save your work first

Inserting an accordion

  1. Place the cursor in the Body: where the accordion content is to be inserted
     
  2. Select the BC Gov Accordion accordion icon icon from the toolbar
    The Accordion container will be displayed

BC Gov Accordion icon

Accordions must be displayed with the Expand all | Collapse all links to meet accessibility standards.

Adding panels to the accordion

To add a panel to an accordion:

  1. Click inside the container and select the Panel for the BC Gov Accordion Panel for BC Gov Accordion icon icon.  
    The Accordion container will be displayed
  2. Click in the Panel Title field and enter an applicable title to be displayed. Note that some of the formatting icons are disable for this field. Anchor tags may be used
  3. Click in the Panel Body field and enter the applicable information. Note most of the formatting icons are available for this field
  4. To create another panel, click in the white space below the existing Panel Body and select the Panel for the BC Gov Accordion Panel for BC Gov Accordion icon icon and repeats Steps 4 and 5

Panel inside the accordion container

Reordering panels

To reorder the panels:

  1. Hover the mouse in the top-left corner above the Panel Title to display the move icon.
  2. Left click and drag into new position. 

Alternately, you may right-click the top-left corner of the panel to cut and paste it into a new location.

drag and drop a panel icon

Reorder multiple accordions

To reorder multiple accordions: 

  1. Hover the mouse in the top-left corner above the Expand All button to display the move icon
  2. Left click and drag into new position. 

Alternately, you may right-click the top-left corner of the accordion to cut and paste it into a new location.

drag and drop an accordion container

Using anchors in accordions

You can use an anchor link in the title section of an accordion panel. When you link to the anchor, the panel is automatically expanded.

Screenshot of anchor appearing before the title of an accordion panel

Expand All | Collapse All
 

Sample: Anchor in an accordion

This is a demonstration of using an anchor tag in the title of an accordion panel.

For the purposes of this demo, the following links will open in a new window (normally we always open web pages in the same browser window):