Accordion icon rotate with transition

Getting Started
1

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?

2

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
3

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!

4

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?

5

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.

6

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

7

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.

image
image769×713 33.5 KB 

.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
8

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

9

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.

Cheers!