Create a Web Accordion

The accordion tool allows content to be displayed in a stacked format on a web page and should only be used on pages with large amounts of content that has been broken into sections. Content must be displayed with the Expand all | Collapse all links to meet accessibility standards.  

Sample Ministries page using the accordion feature

  1. Place the cursor in the Body: where the accordion content is to be inserted
  2. First, select the BC Gov Accordion accordion icon icon from the toolbar
    The Accordion container will be displayed
    BC Gov Accordion icon
  3. 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
    Panel inside the accordion container
  4. 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
  5. Click in the Panel Body field and enter the applicable information. Note most of the formatting icons are available for this field
  6. 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

To reorder the panels, hover the mouse in the top-left corner above the Panel Title to display the move icon.  Left click and drag into new position.

drag and drop a panel icon

To reorder multiple accordions, hover the mouse in the top-left corner above the Expand All button to display the move icon.  Left click and drag into new position.

drag and drop an accordion container