I am trying to make an accordion menu that opens and closes. I made four groups, then grouped those into a component. I have four states to show open versions. I wired each of the groups to auto animate to the new states. When I play it only the first one will work, the rest don't.
I've searched the web and can't find a tutorial on how to create a FAQ menu like the one shown in the picture.
Thank you for reaching out. You can create it using 5 artboards and actions like Transition and Auto-animate. Here is a sample that you can check ( https://xd.adobe.com/view/e16fa53e-6ffc-420a-87b4-c88ff35d13be-b43c/ ). Let me know if this works out for you.
I thought this could be achieved on one artboard now using components and states? That's what I'm trying to do. Thanks.
Copy link to clipboard
A quick demo:
I created a Component, "Accordion Item". Each Accordion Item has two states: Default State and Open State.
Since I was creating a 3-item accordion, I needed 4 artboards: All closed, First one open, Second one open, and Third one open.
Because the accordion is made of 3 instances of one component, creating different permutations (i.e. which item is open) was so easy. The whole thing took about 5 minutes max to build.
To make the whole thing as one component - not sure if that's possible, but I may have a go... 🙂
Well, you can't. Because you cannot target a State of the parent Component from a nested Component instance.
Copy link to clipboard
Make sure you also wire each group in the other states to its respective state. Wires won't transfer over from the first state.
There is a way to do it within 1 artboard and with 1 component, but it's quite the headache 🙂 I played with it and with 3 components this is the most high-fidelity thing you can get. If you want to play around with it, here's the file and the prototype so you can see how I've set it up.
As Kenneth suggested, you can't point nested components to other states, but you can do that with groups. I made a group for each item's title bar, and a component for the text. You can just hide / show the text, but then you get an ugly fade animation that overlaps other items. Also, you can't group the text and title together, because if you want to collapse an item, you only want the title clickable, and not the text. I added a hover effect in there as well 🙂
> you can't point nested components to other states, but you can do that with groups
That's a great find Spas K. (I must admit I'm not patient enough... ;))
I think you can reference to other states with any element except for a (nested) component. Depends on what the clickable area should be. If I didn't have the hover component for the title bar, I could've used the rectangle for the link, and have everything in 1 group.
It's definitely inefficient, and I wouldn't bother with it unless it was really crucial to show the animation. And there are some bugs as well - if you do things in the wrong order, you might have to start over. 😕
It also worked nicely if you turn the bigger component into a stack, as each item when opened pushes the others out due to the automatic padding, so you don't have to manually move them around, although I didn't use them with that example.