What is the recommended way to swap the active header icon with the Cwicly Accordion?
One way to display different icons for active and closed accordion header is to use two separate icons. When checking the code for the accordion, you can see that there is a default “cc-accordion-hidden” class, but when you click on it and open it, the class changes to “cc-accordion-active”. By using relative styling, you can hide or show the icons based on these classes.
See this video: Hamburger Simple - YouTube.
While the video is about creating a hamburger menu, the same concept applies when displaying or hiding icons based on class via relative styling.
General approach:
Toggle between two elements - Tips - Cwicly
But I would also recommend to make use of the accordion classes (open/closed state), as @krievinshj already pointed out, so no additional interaction rules are required.
Thank you for the suggestions.
Yes, this is exactly the approach we already took, having two separate icons overlayed and changed the opacity of the open icon based on the cc-accordion-active class.
I thought perhaps there would be a better way to achieve it, but it seems this is the way to go for now.
I think the most clean solution is to just stack 2 icons inside a div, setting one to display:none and by toggling the accordion, swapping the display states of both icons.
Your solution is of course also suitable, especially when you intend to fade in/out the icons.
You can achieve everything by taking advantage of Relative Styling, instead of custom CSS, just in case.
Not sure if there is a better way, especially since everything can be done visually inside the builder.
Yes, since the opening/closing of the accordion content is animated, we also made the icons fade in/out, otherwise we would have used display:none.