Skip to content

Snippet: Custom WPBakery Accordion Active Colors

Example CSS for targeting the WPBakery Visual Composer accordion modules so you can alter the title styling when active. Important: Note the classnames "vc_tta-color-grey" and "vc_tta-style-classic" these should match the color and style chosen for the accordion. Also the !important tags may not be necessary depending on your site setup so you can try with our without.

/* Alter accordion text active color and font-weight */
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-title > a { color: red !important; font-weight: bold !important; }

/* Alter accordion icon active color */
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-title .vc_tta-controls-icon::before { border-color: red !important; }
Back To Top