Accordion color bug

Hi mooer,
Hope you are doing well.

Thank you so much for sharing the details with us. Actually, on your website, Accordion is getting the Global color that is set and due to that, the color is not working. Please let me know if you want to set which color for which part (i.e. hover, active, text, background) in detail so that I can check and assist you.

Looking forward to hearing from you.
Thank you.

Thanks for your reply.

I’m not sure what global settings you are refering to. I have updated the page with another accordion (#2) which is not using an “expanded” color-scheme, and it is working as intended.

Accordion #1 is set to have

Normal tab background = yellow
hovered tab background = green
expanded tab background = red

normal title color = black
hovered title color = blue
expanded title color = white

Accordion #2 is set to have

Normal Tab background = gray,
hovered tab background = white

normal title color = white
hovered title color = purple

Thanks,

Hi mooer,

Thanks for letting us know that. Unfortunately, I am really sorry to say that it is not possible to set different colors for different accordions. You need to set the same color effects on on accordions. So, we can assist you to set that for all accordions.

Please let us know which color you want to set. Is it Accordion #1 or Accordion #2?

Thank you.

I believe you missunderstand me. Accordion #2 is a separate block and is only there to show you that the color settings are working as intended as long as the block is NOT using an “Expanded tab color”.

Ill add two images to better show what I mean. The first screenshot is from the editor, where you can see what all color-settings. The second screenshot is the live version, where the accordion is only showing the expanded color settings even though it’s not expanded.

Screenshot #1 – from the editor

Screenshot #2 – live

Hi mooer,

Thanks for sharing the screenshots with us. According to your Screenshot#1, I can see that you have set the normal accordion background yellow, and active accordion background red, but it is showing red for all accordion tabs on the front.

But I have checked this on my end by setting the specific color and found that it is showing the same on the front end also. Please check this screencast: https://d.pr/v/taEZ6N

I can see that the colors are from the global color that is set from the theme or customized option. Will you please tell me did you set any global colors?

However, you can use the following custom CSS code that will help you to resolve this issue:

.eb-accordion-smmos.eb-accordion-container .eb-accordion-wrapper:not(.eb-accordion-hidden, .for_edit_page) .eb-accordion-title-wrapper {
background-color: yellow !important; ?
}

.eb-accordion-smmos.eb-accordion-container .eb-accordion-wrapper:not(.eb-accordion-hidden, .for_edit_page) .eb-accordion-title-wrapper:hover {
background-color: green !important;
}

.eb-accordion-smmos.eb-accordion-container .eb-accordion-wrapper:not(.eb-accordion-hidden, .for_edit_page) .eb-accordion-title-wrapper:active {
background-color: red !important; ?
}

.eb-accordion-smmos.eb-accordion-container .eb-accordion-title {
color: black;!important;
}

.eb-accordion-smmos.eb-accordion-container .eb-accordion-wrapper:not(.eb-accordion-hidden, .for_edit_page) h3.eb-accordion-title, .eb-accordion-smmos.eb-accordion-container .eb-accordion-wrapper.expanded_tab h3.eb-accordion-title {
color: white !important;
}

.eb-accordion-title:hover {
color: blue !important;
}

You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.

After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw

Thank you.

Hello mooer,
Hope you are doing well.

We haven’t heard from you since then. Can you please inform me whether the issue mentioned above is already fixed or not?

Let us know the update.

Thank you.
Have a good day!

Thanks for your reply.

Your suggestion worked to a certain degree. The expanded color (which should be red) is only red during the time which the tab is clicked, but returns to yellow once the mouse is let go.

I really appreciate your help, but I would really like a solution which doesn’t involve coding cause I have no coding skills what-so-ever, which means that I’ll require help with the next accordion I use as well.

I really don’t get it why I have this issue. The Accordion worked as intended a couple of months ago (when I last tried). I have no global color settings. I’ve tried to change theme from spectra to twenty twenty four and also deactivated ALL plugins but Essential Blocks, but it still does not work.

What I did find out was when I rerolled Essential Blocks to v 4.4.4 the color settings worked as intended (but instead there was some issue with the toggle-function – the tabs could be expanded but not closed).

Thanks,

Hi mooer,

We are really sorry to hear that it is not working on your end with version 4.4.6. I have checked on my end with the Essential Blocks for Gutenberg plugin version 4.4.6 but didn’t find such an issue. Please check this screencast:?https://d.pr/v/taEZ6N

In order to address and resolve this matter promptly, we’d like to conduct a more in-depth investigation on your specific setup. I request you to contact us here, then we can check the issue and assist you in resolving this. This will enable our team to connect with you directly, thoroughly examine the issue, and provide you with the necessary assistance.

Please rest assured that our dedicated team will be in touch with you soon to resolve this matter. Your satisfaction is of utmost importance to us.

Thank you for your understanding and cooperation.

Hi mooer,
I hope you are doing well.

I wanted to follow up on the previous issue you raised and provide you with an update.

Unfortunately, we did not receive any response from your end, leading us to believe that the issue has been resolved. As a result, we are closing this topic for now. However, you are welcome to reopen this topic if you have any further questions or concerns regarding it.

We encourage you to inform us promptly if you encounter any future issues. Our team is here to assist you and ensure a satisfactory resolution.

Thank you for your attention, and I wish you a wonderful day!

Thanks for your reply.

Sorry for my inactivity, but I haven’t had the time lately to investigate the issue further. I have now created a staging site and I’ll get in touch with your support as you sugguested.

Hi?mooer,

We found the details of the staging site that you shared with us. All colors are working properly on your site except the expanded background color. There is an issue with the expanded accordion color that we need to resolve. I forwarded it to the Dev team. I will let you know the update when it gets resolved, no worries.

Thank you.
Have a good day!

Hi mooer,
Hope you are doing well.

I’m excited to share the good news that we have successfully resolved this issue in our Accordion block. We have incorporated this update into one of our developmental versions of the plugin. To access and test the updated plugin, please download it using the following link: https://d.pr/f/ODEV92

We encourage you to try out the new feature and provide us with your feedback. Your input is highly valuable in helping us further refine and improve our product.

Thank you for your continued support.