Change when active tab/accordion

Dear admin

How can when a tab/accordion is active the background color and elements inside change? I used the Active function but it doesn’t seem to work with the block tab

Video link: https://youtu.be/JC7Mfwm_qfE

Thank you !

Hello @NHViet,

This is because the Active pseudo class isn’t used for this: :active - CSS: Cascading Style Sheets | MDN

What you are looking for is applying styles to the cc-tab-active or cc-accordion-active class instead, using Relative Styling for example.
Although the UI has changed, the principal is the same: How to - Relative Styling in Wordpress Gutenberg - Cwicly - YouTube

Dear Louis

I did it. A bit difficult to use but everything worked fine. Thank you !

Dear Louis

Is this an accordion block bug?. The background color of the active is overlaid by normal. In addition, the active attribute cannot be applied to each Accordion header or content section.
When I apply the same thing to the cc-tab-active of the tab block, the above error does not occur

Video link : https://youtu.be/0nP48VVy_ys

Thank you !

Hi @NHViet,

You should use Relative Styling to target the header or content as shown in the relative styling section of our video on the accordion block → Getting Started - Accordion Block - Wordpress Gutenberg - YouTube

Dear Louis

It works fine. Thank you. Please close topic !