• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Having trouble with accordion menu that opens and closes

Participant ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

jeljohnssp_0-1607702879716.png

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. 

TOPICS
How to

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Dec 12, 2020 Dec 12, 2020

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.

 

Prototype with specs

Accordion .xd file

 

As Kenneth suggested, you can't point

...

Votes

Translate

Translate
Participant ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

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. 
7F3F5F7F-58B4-413A-9F6B-FAAF909FC18F.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

Hi Jeljohnssp,

 

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. 

 

Thanks, 

Atul_Saini

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

I thought this could be achieved on one artboard now using components and states? That's what I'm trying to do. Thanks. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

A quick demo:

https://xd.adobe.com/view/fc2c3452-7739-4556-92bb-fa6a6344924b-a97f/?fullscreen

 

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... 🙂

 

[Edit]

Well, you can't. Because you cannot target a State of the parent Component from a nested Component instance.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 12, 2020 Dec 12, 2020

Copy link to clipboard

Copied

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.

 

Prototype with specs

Accordion .xd file

 

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 🙂

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 12, 2020 Dec 12, 2020

Copy link to clipboard

Copied

> 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... ;))

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 12, 2020 Dec 12, 2020

Copy link to clipboard

Copied

LATEST

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. 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines