Skip to main content
June 18, 2024
Question

Nested Accordions - levels 1 & 2 work. level 3 isn't clickable. Why?

  • June 18, 2024
  • 7 replies
  • 730 views

Hi. I have a 3-level nested accordion. I have made 3 components each with a collapsed & an expanded variant. Levels 1 and 2 are working fine. For some reason, level 3 (the out-most level) isn’t even showing up as clickable. The prototype on-click is there. I can’t figure out what I’ve done wrong.

This is the file if anyone can help.

Figma – 18 Jun 24
This topic has been closed for replies.

7 replies

djv
Figmate
Community Support
June 20, 2024

Hey @Charlie13, sorry to hear you’re having trouble with this!

Thank you for sharing the link to your file. Are you able to also add support-share@figma.com as an editor, so our team can take a closer look?

Charlie13Author
June 21, 2024

Done! Let me know if it didn’t work for you. Thank you!!!

Pavlo_Kiselov
Active Member
June 21, 2024

There is nothing to do with the file mate. I cannot duplicate it, I cannot copy anything from it. Any reason to make such restrictions? There is no way to see how it has been made

Charlie13Author
June 21, 2024

No intention on the restrictions. My first time posting a file and wasn’t sure which settings were helpful. I have changed them to “anyone can edit.” I appreciate if you have any insight into the problem.

Pavlo_Kiselov
Active Member
June 21, 2024

There is a small error in your prototype. You set “On Click” interaction on the component itself so when you nest them some events got “swallowed” by the parent instance. To make it work I set expand/collapse interaction on the header element instead, this way there is no conflicts in event loop

Have a look

Figma – 18 Jun 24
Charlie13Author
June 21, 2024

Thank you!

katrina.smith
New Member
March 21, 2025

There is a small error in your prototype. You set “On Click” interaction on the component itself so when you nest them some events got “swallowed” by the parent instance. To make it work I set expand/collapse interaction on the header element instead, this way there is no conflicts in event loop

Have a look

Figma – 18 Jun 24

This HELPED me tremendously!...Thank You.  This needs to be included in some time of documentation or video because resources on this is non-existent