Style Visual Composer Accordions with CSS

Visual Composer Page Builder (VC) is a wonderful help for developing WordPress page and post layouts visually and without typing code. It is a well-rounded product that I introduce all my clients to. But…

There are a couple of Visual Composer content blocks that need a little polish to make them visually appealing. The accordion block is one of them.

Use the CSS below to style VC accordions. Add the CSS to Dashboard > Settings > Visual Composer > Custom CSS.

These CSS rule sets style the default, active and hover states of the accordion header and the accordion content. The end result will look similar to screenshot under the code.

/**
* VC Accordion Header Text
*/

/* Default */
.wpb_accordion_section.group .wpb_accordion_header.ui-state-default {
  background: none;
  background-color: #f5f5f5;
  border: #ddd 1px solid;
  padding:0;
}

.wpb_accordion_section.group .wpb_accordion_header.ui-state-default a {
  padding:5px 0px 2px 15px;
  font-size: 18px;
  font-weight:bold;
  -webkit-font-smoothing: antialiased;
  line-height:32px;
}

.wpb_accordion_section.group .wpb_accordion_header.ui-state-default a:before {
  content: "\f347"; // We are using a Dashicon
  -webkit-font-smoothing: antialiased;
  font: normal 26px/1 'dashicons';
  vertical-align: top;
  line-height:30px;
  padding-right:10px;
}

/* Active */
.wpb_accordion_section.group .wpb_accordion_header.ui-state-default.ui-state-active {
  background: none;
  background-color: #45B0D0;
  color:#fff;
  border: 0;
}

.wpb_accordion_section.group .wpb_accordion_header.ui-state-default.ui-state-active a {
  color:#fff;
}

.wpb_accordion_section.group .wpb_accordion_header.ui-state-default.ui-state-active a:before {
  content: "\f343";
  -webkit-font-smoothing: antialiased;
  font: normal 26px/1 'dashicons';
  vertical-align: top;
  line-height:30px;
}

/* Hover */
.wpb_accordion_section.group .wpb_accordion_header.ui-state-default.ui-state-hover {
  background: none;
  background-color: #45B0D0;
  color:#fff;
}

.wpb_accordion_section.group .wpb_accordion_header.ui-state-default.ui-state-hover a {
  color:#fff;
}

/**
* VC Accordion Body Content
*/

/* Default*/
.wpb_accordion_section.group .wpb_accordion_content {
  background-color: #f5f5f5;
  border: #ddd 1px solid;
  border-top:0px;
}

/* Active */
.wpb_accordion_section.group .wpb_accordion_content.ui-accordion-content-active {
  background-color: #fff;
}

/* Hover */
.wpb_accordion_section.group .wpb_accordion_content.ui-accordion-content-hover {
  background-color: #333;
}
Style Visual Composer Accordions
Styled Visual Composer Accordions

See the accordion live on GottaJavMiami.

Use Dashicons

The CSS rule sets above use Dashicons to create the expand and collapse icons to the left of the accordions. WordPress ships with Dashicons for use within the admin area. We can use Dashicons in the frontend too. Add the code below to your child theme’s functions.php file or to a functions plugin to enqueue WordPress Dashicons for use in your theme.

<?php

add_action( 'wp_enqueue_scripts', 'vr_frontend_dashicons' );
function vr_frontend_dashicons() {
   wp_enqueue_style( 'dashicons' );
}

?>

See a list of Dashicons in the WordPress resource documents.

Post links to your styled VC accordions. Feeling generous? Share the CSS too.

7
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
David Knudsen

Lee, Thanks for this. I’ve been pulling out my hair trying to style a VC accordion, and then came across your helpful info. It got me 90% of the way there. I’m having a problem, though, with the dashicon caret. It displays on the right of the header bar in my implementation, and I prefer it the way you have it — to the left of the header text. And the defauly VC accordion navigation continues to be displayed underneath it (faint but visible) and I can’t seem to ‘grab it’ as a separate class to hit it with a… Read more »

David Knudsen

Hi, Lee,
Thanks for offering to take a look. In posted a week or so ago on here, but it didn’t ‘take’, so reporting. The page is at http://goo.gl/zdhRgx It’s a staging site because I’m still working on it.

Hi David, I’m currently on vacation and unable to login to JournalXtra. Took a quick look at your CSS. Which version of visual composer are you using? There appear to be CSS conflicts. I can work around some of them by using the !important flag. Wasn’t able to get the arrow to float left. Here is your in-use CSS with the !important flags attached: /** * VC Accordion Header Text */ /* Default */ .wpb_accordion_section.group .wpb_accordion_header.ui-state-default { background: none!important;; background-color: #e7edde!important;; border: #ddd 1px solid!important;; padding:0!important; } .wpb_accordion_section.group .wpb_accordion_header.ui-state-default a { padding:5px 0px 6px 15px!important; font-size: 18px!important; font-weight:bold!important; -webkit-font-smoothing: antialiased!important;… Read more »

Hello guys,

I found this very impressive, but, now even with WP super cache defined Im dealing with the 8-10 sec lag on the page due the following :
Access-Control-Allow-Origin:*
Content-Type:application/x-font-woff;charset=utf-8
Request Headers
Provisional headers are shown
Referer:http://e-trziste.eu/wp-includes/css/dashicons.min.css?ver=4.2.1
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36

I assume its cause the function.php modification part loading the dashicons.
add_action( ‘wp_enqueue_scripts’, ‘vr_frontend_dashicons’ );
function vr_frontend_dashicons() {
wp_enqueue_style( ‘dashicons’ );
}

Is there any way how can I solve this? I would like to keep styling for it, but, the load is very bad in this case =(

The VC is of X.4.4 version…

Annie R

fantastic, thank you so much :)

Michael

Greetings,
How would I expand all the accordions on load?

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!