Skip to main content

I’m trying to create a accordion component and when you open the accordion the image on the right changes. I’m trying to figure out how to do this with interactions. The image would be different with each accordion item.


I’d also like the other accordion items to close when you open another one. Is this even possible? I’m having a hard time figuring it out.


Here’s the components: https://www.figma.com/design/20sc256zFZLvA28UFpzRGo/Accordion-Test?node-id=0-1&t=kpAox86dJyipLIBI-1


Here’s the prototype: https://www.figma.com/proto/20sc256zFZLvA28UFpzRGo/Accordion-Test?page-id=0%3A1&node-id=1-305&viewport=1019%2C334%2C0.34&t=dmFOw4KwqnqwDSQM-1&scaling=min-zoom&content-scaling=fixed

Hey @Lindsey_Drennan, thanks for reaching out and sorry for the delayed reply!


This was a bit difficult to think through, so while it might take some time to build out, it should be possible.


To start, you’ll want to create another state in the accordion with an image component (rather than 2 states in an accordion). For the image to change on open, and be swappable at an instance level, you’ll need 2 images in each state, one showing and one hidden, so that you can apply each image for each instance and have it preserved through the interactions.


For any additional one on one support with this, please reach out to our support team directly here: https://help.figma.com/hc/en-us/requests/new

Terms & ConditionsCookie settings