Adding Fill to Active Accordion Heading

Hey Guys,

How can I add fill to an active accordion?

Thanks,
Jason

Hi,

Try this:


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

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

’ Arghh!! :slight_smile:

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

Hey Gerard,

Thanks for jumping in! Greatly appreciated :slight_smile:

Jason,

You can try this CSS snippet.

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

Hope this helps!

Ben

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

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

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

Hey Jason,

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

Ben

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) :wink:

Take care!

Hey Carlos,

You can head over to our User Voice Forums and add that as a feature request! The guys love to go there to shop for new ideas to implement. :slight_smile:

Ben

Hi guys :slight_smile:

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

Hey Dom,

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

/*
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;
}

Thanks!

KC

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

Hey Dom,

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

Thanks!

KC

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! :slight_smile:

Ben

I thought that it would be a headache. :confused: Hopefully there is a simple workaround :smiley:

Dom

Hey Dom,

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

Ben

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

Regarding the accordion animation:

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

		if ( item.offset().top < 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. :slight_smile:

Thanks