Home › Forums › WoodMart support forum › Remove highlighting of active element of Woodmart Accordion

Remove highlighting of active element of Woodmart Accordion

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 10, 2022 at 2:23 pm #344376

    horny_fungus
    Participant

    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

    January 10, 2022 at 2:42 pm #344382

    horny_fungus
    Participant

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

    January 10, 2022 at 3:59 pm #344393

    Luke Nielsen
    Keymaster

    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

    January 11, 2022 at 8:50 am #344499

    horny_fungus
    Participant

    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.

    January 11, 2022 at 12:30 pm #344552

    Luke Nielsen
    Keymaster

    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
Viewing 5 posts - 1 through 5 (of 5 total)