Accordion & Tab Set

Creating a Tab or an Accordion

Use the Add Element option to add a tab or accordion to Visual Composer. When prompted for an element type, select “Accordion” or “Tabs.”  The WCMS automatically adds the element with default section / tab titles. To edit:

• To edit the settings for the accordion / tab, click the pencil tool in the blue toolbar for the content element.
• To edit the title for a section, click inside the section (or tab) and then click the pencil tool for the section (orange toolbar).
• To add content, click inside the section or tab and then, when prompted, select the type of content element. (To click inside an accordion section, you may need to expand the section by clicking the plus sign to the left of the section title.)
• To rearrange a tab or accordion section, use drag tool in the tab / section tool bar (first tool on left).
• To delete a tab or accordion section, click inside the tab / section and then click the X tool in the orange section / tab toolbar.

(Tabs and accordions are single-use content elements that must be created in Visual Composer. To create a tab set or accordion that can be reused or inserted into a WYSIWYG field, use the “New Content” option in the WCMS content browser to create a reusable Visual Composer module. Then insert the tab / accordion into the reusable module.)

Adding Open / Close Controls

To allow visitors to expand or collapse all sections of an accordion, you have two options:

• Use the Add Element in Visual Composer to add an Expand / Collapse module. This is the most flexible option in that you can place the controls anywhere on the page, although the best position is immediately above the accordion.
• In page Display Options, check “Show Expand/Collapse Options  (Top of page).”  This option places the controls at the top of the page. Use this option if there are multiple expandable / collapsible components on the page (which should be a rare scenario and generally not recommended).