Join the Webstudio community

Updated 2 weeks ago

Change Accordion Icon

At a glance
The community member is using an accordion on their website and wants to change the toggle icon from a "+" to a "-" when a section expands, and back again when it collapses. Other community members suggest using the Radix accordion, which has a state that can be used to display the appropriate icon without needing to write custom JavaScript. They provide example links to demonstrate how this can be achieved by adding two icons and displaying them based on the accordion state.
Useful resources
Hi everyone! I’m using an accordion on my site and I’d like the toggle icon to switch from a “+” to a “–” when a section expands (and back again when it collapses). What’s the easiest way to achieve this—are there any ready-made solutions or a minimal JS snippet I can use without writing tons of custom code? Thanks!
Marked as solution
when you use the radix accordion it has a state so you can display what icon you want to display based on state. no need to add JS
View full solution
M
y
4 comments
when you use the radix accordion it has a state so you can display what icon you want to display based on state. no need to add JS
https://wayfarer-6dzkd.wstd.io/ - check the accordion on this page

i change the background/rotate the arrow based on state of the accordion

so in your case you might add two icons and display them based the state
Thank you!
It took me a while to understand how to work with the state but makes sense now!
Add a reply
Sign up and join the conversation on Discord