Accordions & Toggles

Accordions are useful to publish different additional content divided or grouped in different sections. In this way you can publish a lot of information in compact form, not blowing out the size of your page and attract the visitor’s attention on some special points in your article.

In order to insert accordion in your content click on Accordions shortcode. This element is located in „Content“ tab of WPBakery Page Builder

Your accordion will be immediately added to your page. Now you can start editing its settings. Just click on “edit” icon on your “Accordion” panel

Here you can make general accordions settings in the way as it is described for „Tabs & Tours“ shortcode (see above)

In order to edit the settings of one accordion section, click on “edit” icon on your “Section” panel:

After that you are ready to insert any content in your accordion section by clicking on “plus” symbol on the appropriate tab.

See demo

Useful CSS

Section title color, background-color, font-size:

.vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title {
    background-color: #ffffff !important;
    color: #5f727f !important;
    font-size: 18px !important;
    font-weight: 300 !important;
}

Active section title color, background-color, font-size:

.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-title > a{
    background-color: #123 !important;
    color: #eeeeee !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all accordions:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-accordion" class name in this case:

.custom-accordion .vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title {
    background-color: #ffffff;
    color: #5f727f; 
    font-size: 18px; 
    font-weight: 300; 
}