Accordion icon rotate with transition

I started working with the accordion using the tutorial at Getting Started - Accordion Block - Wordpress Gutenberg - YouTube. Where in the tutorial the icon goes through a rotate transition when openening/closing the item, on my page it’s without a transition. I’ve tried to solve this problem by adding a rotate transition myself in the relative styling for the icon, but then it only works for opening an item. I also tried to add an extra relative styling especially for closing the item, but that doesn’t work either. Does anyone know what I’m doing wrong?

Hey @Rogers.

You want to set the transition as a general rule, not dependent on the state of the accordion via relative styling.

It’s demonstrated here.

Hope it helps, but let me know if you need some additional hints.

1 Like

Pfff, stupid of me. I could have come up with this myself. Also because it’s just plain in the video. And to think I spent hours on this, this afternoon… :wink:

Anyway, thanks a lot for the help!

I have another question. Since it also has to do with the accordion, I ask my question here. Hopefully that’s not a problem.

The accordion slides open in a certain way. I can set the duration of this in the general settings. However, I can’t set any other animation/transition in which the slide opens. How can I manage to slide it open with a different animation/transition? Do I have to create a relative style that acts on the “cc-accordion-active” class or is there an easier way?

Currently, that’s only possible applying custom CSS.
I think you could override the current rules somehow, but you would lose the transition duration accordion block option.
You’d still be limited to the predefined transition timing options.

Thanks for the explanation, @Marius. Then I’ll just leave it as it is.

Here is a snippet, in case you want to go the custom CSS route.
You just need to replace one value and will maintain the transition duration inside the block options.

.blockclass .cc-acdc {
    transition: linear var(--cc-accordion-transition,.2s) max-height;

Replace the linear value to whatever transition-timing-function value you want.

1 Like

Thank you for the code and all the help. I’m going to check it out. :slight_smile:

You are welcome @Rogers.
Let me know if it works out for you.

Just on a side note.
It might be the better option to create a separate thread for different topics.
That way, other users can benefit from it as well.