Remove highlighting of active element of Woodmart Accordion

Hi, can you please provide me with a way to remove highlighting of active element of Woodmart Accordion.
Now open accordion item’s title is highlighted with colour selected in theme style settings.
I want this colour to stay the same as when the item is not active.
Image for clarification – https://paste.pics/ba6f53ec8e27105296ae1c43eb653d18

Also I would like to know how I can set all accordion elements open by default on desktop only.

Hello,

In order to change the active color for the accordions, please enter the below code to the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title.active {
    color: var(--wd-title-color);
}

Also, you can open all accordion elements by default by means of the below custom CSS code, enter it to the “Custom CSS for desktop”.

.website-wrapper .tabs-layout-accordion .woocommerce-Tabs-panel {
	display: block !important; 
}

.website-wrapper .tabs-layout-accordion .wd-scroll-content {
	max-height: none;
}

.website-wrapper .tabs-layout-accordion .wd-accordion-title {
	pointer-events: none;
}

Kind Regards

Thank you for your help.
Unfortunately the code works not as expected:

.tabs-layout-accordion .wd-tab-wrapper>.wd-accordion-title.active {
    color: var(--wd-title-color);
}

This one affects product accordion tabs on single product page, but unfortunately it does not affect Woodmart Accordion Element used on some other pages.

.website-wrapper .tabs-layout-accordion .woocommerce-Tabs-panel {
	display: block !important; 
}

.website-wrapper .tabs-layout-accordion .wd-scroll-content {
	max-height: none;
}

.website-wrapper .tabs-layout-accordion .wd-accordion-title {
	pointer-events: none;
}

This one also affects only single product page. And accordion no longer works – it stays open even if clicked.

Hello,

The “Accordion” element isn’t related to the product accordion tabs so they are different, therefore the above code will be needed for opening all elements on the product page.

As for the “Accordion” element tabs, try to use this custom CSS for opening all tabs.

.wd-accordion .wd-accordion-content {
	display: block !important;
	max-height: none;
	opacity: 1;
}

.wd-accordion .wd-accordion-title {
	pointer-events: none;
}

.wd-accordion .wd-accordion-title.wd-active .wd-accordion-title-text {
    color: var(--wd-title-color);
}

.wd-accordion-title.wd-active .wd-accordion-opener.wd-opener-style-arrow {
    transform: none;
}

By opening the accordion tabs in this way (via custom CSS), they will not be clickable. Unfortunately, our structure of the “Accordion” element doesn’t allow us to open all accordion tabs in other ways.

Kind Regards

[Author]

Posts