Accordion Prototype in Sketch

Is there a way to create an intelligent/dynamic accordion prototype in Sketch?

Obviously, if clicking on one element, only this specific target should expand, the others should remain closed. Just how accordions work nowadays.

is it possible to create this prototype directly within Sketch itself?

I think this can partially be achieved using overlays.

Basically, you’d create multiple instances of a component in different states, and then use them as overlays with a solid background so they can cover the contents beneath them.

Because these are overlays they won’t shift contents around them like with smart distribute.

1 Like

Hey @thomas.enzler and @Kilobyte9335 I made a prototype of an accordion that can help. While I was working on it I discovered that it’s way easier if the accordion sections are always the same height.

If they are the same height you’ll be able to reuse the artboards, but if each section needs to have a unique height, you’ll need to adjust each overlay. It’s still doable, but it’ll require more tweaking.

I hope this helps, here’s the link to the prototype, let me know what you think :smiley:

1 Like

Hi @dfmedrano and @Kilobyte9335
Thanks a lot for your replies. I will go through them as soon as I find time.
Meanwhile, I also designed a prototype in Sketch with accordions. It worked, but needed some workaround and it seemed to be a bit too overcomplicated.
Anyway, once I get there I let you know. Much appreciate your feedback!

1 Like

thanks a lot Patrik.
I’ve done it like this. sorry for late reply

1 Like

and also thanks a lot to Jorge. We have been in contact meanwhile :slightly_smiling_face:
awesome support here, thanks community and support team

1 Like

Hey Thomas! Happy to help and we’re here anytime you need!

Thanks for your support :raised_hands: