Accordion Styling the Active Open Accordion

[mark2inspect]

I am using the Ethos stack. I am trying to style the classic accordion element that is actively open so that the heading background and text are different colors from the closed accordion elements on the following page. I tried using a:active but couldn’t get that to work. Any assistance you can provide would be greatly appreciated.

http://748.b06.myftpupload.com/faq/

This is an example of what I am trying to achieve.

Here is an example of what I have.

Here is my CSS:

/* --ACCORDION styles-- */

/*Accordion heading background color*/
/*change the font and color of the accordion item title*/
.accordion-tool .x-accordion-heading a {
  background-color: #DADADA !important;
  color: #0066B3;
  font-size: 18px;
  border: #A80F0F solid 1px;
}

/*Accordion heading hover color*/
.accordion-tool .x-accordion-heading a:hover {
  background-color: #fff;
  color: #f25d2c !important;
}

/*Font color for each open accordion item*/
.accordion-tool .x-accordion-body .x-accordion-inner {
}

/* Toggle Icons */

/* Change Icon of Toggle and color when open */
.accordion-tool .x-accordion-heading .x-accordion-toggle:before {
  content: "\f13a";
  color: #F25D2C;
  font-size: 20px;
}

/* Toggle Icon Color when closed*/
.accordion-tool .x-accordion-heading .x-accordion-toggle.collapsed:before {
  color: #A80F0F;
  content: "\f138"; /* If you wanted a different Icon when closed */
}

/* Toggle Icon Hover Color & Position */
.accordion-tool .x-accordion-heading .x-accordion-toggle:before {
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

[mldarshana]

Hi There,

Remove your CSS rule added

.accordion-tool .x-accordion-heading a {
  background-color: #DADADA !important;
  color: #0066B3;
  font-size: 18px;
  border: #A80F0F solid 1px;
}

Then try adding the following Javascript code int your page’s Javascript section.

jQuery( ".x-accordion-toggle" ).parent().css( "background-color", "red" );

Hope that helps.

[mark2inspect]

Your suggestion did not work and changed the color theme I was working on. Please see the new screenshot. The open accordion should be a different color background and font from all the closed ones. I look forward to your next reply.

[paul.r]

Hi,

You can try this code instead.

.x-accordion-toggle {
    color:#fff !important;
    background-color:red !important;
}

.x-accordion-toggle.collapsed {
    color:#fff !important;
    background-color: #333 !important;
}

Hope that helps.