Skip to main content
Question

Creating an Accordion Component with Changing Image

  • June 18, 2024
  • 1 reply
  • 251 views
Lindsey_Drennan

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

This topic has been closed for comments

dvaliao
Figmate
  • dvaliao
  • Community Support
  • June 24, 2024

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

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings