Hi Peter,

We installed Tabs & Accordions on a site which we migrated from J.3 to J.5. On this page you can see an example of the accordions (I made the url confidential so as not to show our customers in public support tickets).

It works great, however I have an issue with the styling. The template is a child template of Cassiopeia and in the user.css I created some custom css in order to make the accordions match the customer's corporate styling. I cannot find out why the following goes wrong:

I click an accordion item to open it, then I click the same item in order to close it again. After the second click, the panel has the "hover" color for closed panels, which is correct because the pointer is above this item. If I now move the pointer away from this item, the background color of the panel changes to the color that is meant for opened items. If I then click a random spot in the (background of the) page, the background color changes to the color that I intended for closed items.

During all steps of this process, the text color is correct.

Hope you can help me to fix this,

Frits

Hi Peter,

Thanks for your reply. It turned out that it was the :focus state rather than :active but you pointed me into the right direction. Issue solved!

Kind regards, Frits

No problem 🙂