[seamus55Participant]

Hi, I can’t figure out how to change the background color of the accordion header color when I expand the accordion. Could you please provide the css?

Also I want to change the alignment of the accordions and I can’t seem to figure that one out as well.

Thanks so much for your guys’ awesome support

[DarshanaModerator]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer and change the color value according to your preference.

.x-accordion-heading .x-accordion-toggle {
    background-color: #ff0000;
}

To check the alignment issue, please provide us with a URL to your page.

Thanks!

[seamus55Participant]

Thanks for the quick reply!

That CSS works only when the cursor is hovering off the header. When the accordion is expanded and the cursor is hovering over the title, the background color of the accordion header reverts back to a default grey. Can I change this?

The URL I’m working on at the moment is https://www.onepricedeliverydrycleaners.com/lets-do-this/

I would like to move the actual accordion headers closer together as well as closer to the edge of the page (less of a margin) if that makes sense.

Thanks again

[DarshanaModerator]

Hi there,

I’m sorry, but the URL that you have provided is invalid (http://screencast.com/t/mIhQBWZ0W3hp). Could you please provide us with the correct URL, so that we can check.

Thanks!

[seamus55Participant]

Sorry I changed it to public, it’s view able now.

[Paul RModerator]

Hi,

Sorry, I still can’t access the page.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[seamus55Participant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Kindly change the code to this.

.x-accordion-heading .x-accordion-toggle,
.x-accordion-heading .x-accordion-toggle:hover {
    background-color: red;
}

.x-accordion-heading .x-accordion-toggle.collapsed, 
.x-accordion-heading .x-accordion-toggle.collapsed:hover {
    background-color: white;
}

/* space between headings */
.x-accordion-heading .x-accordion-toggle {
    line-height: normal;
    padding: 5px 15px;
}

Hope that helps.

[seamus55Participant]

Oh sweet that does it! Thank you kindly you guys (gals?) are the best!!!

[DarshanaModerator]

Glad we were able to help 🙂

[Author]

Posts