Step-by-step instructions for B.C. government content editors on how to create a web accordion using the CMS Lite application. ReviewtheWeb Style Guidefor 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
Insert an accordion
Place the cursor in the Body: where the accordion content is to be inserted
Select the BC Gov Accordion icon from the toolbar The Accordion container will be displayed
Accordions must be displayed with the Expand all | Collapseall links to meet accessibility standards.
Add panels to the accordion
To add a panel to an accordion:
Click inside the container and select the Panel for the BC Gov Accordion icon. The Accordion container will be displayed
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
Click in the Panel Body field and enter the applicable information. Note most of the formatting icons are available for this field
To create another panel, click in the white space below the existing Panel Body and select the Panel for the BC Gov Accordion icon and repeats Steps 4 and 5
Reorder panels
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.
Alternately, you may right-click the top-left corner of the panel to cut and paste it into a new location.
Reorder multiple accordions
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.
Alternately, you may right-click the top-left corner of the accordion to cut and paste it into a new location.
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.