# Adding Fill to Active Accordion Heading

**URL:** <https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665>\
**Category:** Beaver Builder\
**Created:** [July 2, 2015, 6:24pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665 "2015-07-02T18:24:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jasonklineklineitsol](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/jasonklineklineitsol/32/141_2.png) [@jasonklineklineitsol](https://community.wpbeaverbuilder.com/u/jasonklineklineitsol)\
**Post date:** [July 2, 2015, 6:24pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/1 "2015-07-02T18:24:52Z")

</div>

Hey Guys,

How can I add fill to an active accordion?

Thanks,  
Jason

---

<div class="post-metadata">

**Author:** ![nomad411](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/nomad411/32/2195_2.png) [@nomad411](https://community.wpbeaverbuilder.com/u/nomad411)\
**Post date:** [July 2, 2015, 7:49pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/2 "2015-07-02T19:49:55Z")

</div>

Hi,

Try this:

’  
div.fl-accordion-item.fl-accordion-item-active {  
background-color: #000000;  
}

’

---

<div class="post-metadata">

**Author:** ![nomad411](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/nomad411/32/2195_2.png) [@nomad411](https://community.wpbeaverbuilder.com/u/nomad411)\
**Post date:** [July 2, 2015, 7:57pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/3 "2015-07-02T19:57:06Z")

</div>

Sorry about the useless quotes, my OS is switching my quotes to curly quotes and I cannot find where it’s from anymore!!

’ Arghh!! 🙂 ’

---

<div class="post-metadata">

**Author:** ![jasonklineklineitsol](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/jasonklineklineitsol/32/141_2.png) [@jasonklineklineitsol](https://community.wpbeaverbuilder.com/u/jasonklineklineitsol)\
**Post date:** [July 3, 2015, 3:46am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/4 "2015-07-03T03:46:27Z")

</div>

Hi nomad411,

Thank you for the response. That works great for the accordion item background.

How about for the accordion button heading background? Example: Only the active accordion will have the button heading background fill.

Thanks,  
Jason

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [July 3, 2015, 4:20am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/5 "2015-07-03T04:20:29Z")

</div>

Hey Gerard,

Thanks for jumping in! Greatly appreciated 🙂

Jason,

You can try this CSS snippet.

```auto
div.fl-accordion-item.fl-accordion-item-active .fl-accordion-button {
  background-color: #000000;
}

```

Hope this helps!

Ben

---

<div class="post-metadata">

**Author:** ![jasonklineklineitsol](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/jasonklineklineitsol/32/141_2.png) [@jasonklineklineitsol](https://community.wpbeaverbuilder.com/u/jasonklineklineitsol)\
**Post date:** [July 3, 2015, 4:35am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/6 "2015-07-03T04:35:52Z")

</div>

Hi Ben,

Thank you for your response. Awesome! That worked.

Couldn’t find the selector myself. Is there some where specific I should be looking?

Thanks,  
Jason

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [July 3, 2015, 4:41am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/7 "2015-07-03T04:41:41Z")

</div>

Hey Jason,

No worries! If it helps, I use the Chrome inspector tool all the time as I find it easier. When the Accordion is active, it adds the class `fl-accordion-item-active` to the entire entry. So what I did, I just added the child class for the header which is `fl-accordion-button`.

I hope that answers your question.

Ben

---

<div class="post-metadata">

**Author:** ![jasonklineklineitsol](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/jasonklineklineitsol/32/141_2.png) [@jasonklineklineitsol](https://community.wpbeaverbuilder.com/u/jasonklineklineitsol)\
**Post date:** [July 3, 2015, 4:55am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/8 "2015-07-03T04:55:57Z")

</div>

Hi Ben,

Thank you for your response.

I also use the Chrome inspector but forgot to add “div.” in front of the “fl-accordion-item.fl-accordion-item-active fl-accordion-button”.

Great! Thank you for the support.  
Jason

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [July 3, 2015, 4:58am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/9 "2015-07-03T04:58:07Z")

</div>

Hey Jason,

No worries! Here to help. Have fun with The Beaver! 🙂

Ben

---

<div class="post-metadata">

**Author:** ![cdivas](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/c/a8b319/32.png) [@cdivas](https://community.wpbeaverbuilder.com/u/cdivas)\
**Post date:** [July 3, 2015, 7:02am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/10 "2015-07-03T07:02:21Z")

</div>

Hello Ben!

I would be great if this colors could be chosen from the module settings and not using code. This would help out clients that know nothing about code to be able to edit their layouts.

Hope it helps (and gets considered) 😉

Take care!

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [July 3, 2015, 7:11am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/11 "2015-07-03T07:11:48Z")

</div>

Hey Carlos,

You can head over to our [User Voice Forums](https://wpbeaverbuilder.uservoice.com/forums/270594-general) and add that as a feature request! The guys love to go there to shop for new ideas to implement. 🙂

Ben

---

<div class="post-metadata">

**Author:** ![icu2\_builder](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/i/dbc845/32.png) [@icu2\_builder](https://community.wpbeaverbuilder.com/u/icu2_builder)\
**Post date:** [November 9, 2015, 4:17pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/12 "2015-11-09T16:17:52Z")

</div>

Hi guys 🙂

I need your help if possible. I am trying to change title colour for all open accordions. Example:  
2 accordions are open and both are red. The above solution is working only for one open accordion at the time (last active).

Much appreciated,  
Dom

---

<div class="post-metadata">

**Author:** ![kcchai](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/kcchai/32/621_2.png) [@kcchai](https://community.wpbeaverbuilder.com/u/kcchai)\
**Post date:** [November 9, 2015, 6:55pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/13 "2015-11-09T18:55:09Z")

</div>

Hey Dom,

Try the CSS snippet below. Let us know if this works. 🙂

```auto
/*
Change Accordions Title Color when open
*/
.fl-accordion .fl-accordion-item.fl-accordion-item-active .fl-accordion-button .fl-accordion-button-label {
	color:#c0392b;
}

/*
Change Accordions Content Color when open
*/
.fl-accordion .fl-accordion-item.fl-accordion-item-active .fl-accordion-content p {
	color:#c0392b;
}

```

![](http://i.imgur.com/wJeddMk.png)

Thanks!

KC

---

<div class="post-metadata">

**Author:** ![icu2\_builder](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/i/dbc845/32.png) [@icu2\_builder](https://community.wpbeaverbuilder.com/u/icu2_builder)\
**Post date:** [November 9, 2015, 7:14pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/14 "2015-11-09T19:14:41Z")

</div>

Hi KC,

it works for two accordions, but I am trying to make it work in one accordion structure where I have two lists open (I enabled (in accordion settings) that I can open multiple lists without automatically closing the list previously opened).  
Hope that makes sense.

Open Example Accordion  
List 1  
List 2 (Open and Red)  
List 3  
List 4 (Open and red)  
Close Example Accordion

List 2 and 4 are open in and red until you close it.

Thanks,  
Dom

---

<div class="post-metadata">

**Author:** ![kcchai](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/kcchai/32/621_2.png) [@kcchai](https://community.wpbeaverbuilder.com/u/kcchai)\
**Post date:** [November 9, 2015, 9:00pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/15 "2015-11-09T21:00:52Z")

</div>

Hey Dom,

Just letting you know I’m checking in with the team on this one.

Thanks!

KC

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [November 10, 2015, 3:40am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/16 "2015-11-10T03:40:51Z")

</div>

Hey Dom,

Okay, so it seems the problem here is that only the first active accordion gets the `-active` class. I’ll go ahead and file a bug report for this so our lead dev can take a look. Thanks for the heads up! 🙂

Ben

---

<div class="post-metadata">

**Author:** ![icu2\_builder](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/i/dbc845/32.png) [@icu2\_builder](https://community.wpbeaverbuilder.com/u/icu2_builder)\
**Post date:** [November 10, 2015, 2:46pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/17 "2015-11-10T14:46:32Z")

</div>

I thought that it would be a headache. 😕 Hopefully there is a simple workaround 😃

Dom

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [November 12, 2015, 4:14am UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/18 "2015-11-12T04:14:35Z")

</div>

Hey Dom,

Just letting you know that the fix for this will be available on the next maintenance patch. 🙂

Ben

---

<div class="post-metadata">

**Author:** ![icu2\_builder](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/i/dbc845/32.png) [@icu2\_builder](https://community.wpbeaverbuilder.com/u/icu2_builder)\
**Post date:** [November 18, 2015, 3:02pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/19 "2015-11-18T15:02:32Z")

</div>

HI Ben,  
when is the maintenance patch coming out?

Also I have one more thing you could hopefully help me with. I want to remove the open animation from the accordions (sliding down to just open without animation).  
If you could navigate me to the file where to change it you would save me a lot of time.

Thanks,  
Dom

---

<div class="post-metadata">

**Author:** ![icu2\_builder](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/i/dbc845/32.png) [@icu2\_builder](https://community.wpbeaverbuilder.com/u/icu2_builder)\
**Post date:** [November 18, 2015, 3:52pm UTC](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665/20 "2015-11-18T15:52:10Z")

</div>

Regarding the accordion animation:

\_slideDownComplete: function()  
{  
var item = $( this ).parent(),  
win = $( window );

```
		if ( item.offset().top &lt; win.scrollTop() + 100 ) {
			$( 'html, body' ).animate({ 
				scrollTop: item.offset().top - 100 
			}, 500, 'swing');
		}
	}

```

I assume that that has something with this code. wp-content/plugins/bb-plugin/modules/accordion/js/frontend.php

How to remove animation that is pushing the accordion 100px up or down, and remove the animation? I want to make it plain without animation. 🙂

Thanks

[Next page](https://community.wpbeaverbuilder.com/t/adding-fill-to-active-accordion-heading/3665.md?page=2)