Accordion help needed.

[Syeds]

I have been following tutorials posted here but I cannot get it to work. For some reason I cannot get pas a single click. My ultimate goal is to get the accordions to work as mentioned here: https://assets.adobe.com/public/8f1ba6b5-a1fb-4147-6152-2dfdccd8916f and prototypes herehttps://xd.adobe.com/view/eb0cc70f-4b5b-4f18-463d-07dd68d3d70c-9d3d/?fullscreen

I tried to follow the tutorial but just is too fast and does not explain the steps. Sorry.

I have attached screensshots that can provide a bit of context.

1. All accordion open and closed intances are grouped.

2. These individual groups have a parent accordion component

3. I added states to the parent component of each open instance: For example, 8 open states for 8 accordions

4. My prototyping is is not making proper conections.

Please help.

[Chris W. Griffith]

Are you drilling down to the element you want to act as the trigger? Your last screenshot seems to show the triggers on incorrect layers. 

[Syeds]

Yes. It is a simple interface. Select to expand. I do not want them to close the non-clicked ones. I would like the ability to open and close each individual accordion seperately.

[Chris W. Griffith · Accepted solution]

That is going to be almost impossible to prototype. In the samples you showed, the accordian has 5 states: all closed, 1 open, 2 open, 3 open, and 4 open. That is not too bad to wire together. With each accordian being indivually controlled, this jumps to 15(?) different states that you now have to account for and attempt to wire. 

Take a step back and try building just a component with two accordians and get that working, then move up from there. But it is still going to be a big effort.

[Syeds]

Thank you for your advise and time.

[Syeds]

Another member posted a solution:
https://youtu.be/Pf1a-bp3XmA

[Spas K.]

That's still with only 1 open at a time though. If you want to have multiple open at a time, the amount of states will increase x4 🙂

[Enked]

I'm trying to create the exact Accordian in the youtube video above. 

The video steps are unclear, there's no audio or text description.

Can someone 'expand' on this and help me build this accordian via more elaborate or simpler steps. I find the video unclear.

Thank you so much. ❤️ 

[Syeds]

@Enked  After struggling at it when I started lerning it was a difficult consept. Untimate I use the video @Spas K. created in combination with what I was doing and I figured it out. Can you explain how far you have gotten and what steps you exactly are stuck with. Perhaps some screen shots.

Example

https://www.dropbox.com/s/ew5n35pwqntiu37/accordion-example01.xd?dl=0

Example

https://www.dropbox.com/s/a1huawpdjbzjd6s/accordion-example03.xd?dl=0

[Spas K.]

Hi @Enked , sorry you found my video unclear. Haven't made many tutorials and this was one of my first, so I'm sure there's a lot to improve on. It was intended to illustrate the concept and show some minor tricks & tips.

In general, the idea is that you will need to have a separate state for every possible case. If you have 4 tabs for example, and only 1 tab can be open at a time, you will need the following states:

1. All tabs closed.
2. First tab opened, 2, 3, & 4 closed.
3. Second tab opened, 1, 3 & 4 closed.
4. Third tab opened, 1, 2 & 4 closed.
5. Fourth tab opened, 1, 2 & 3 closed.

"Stack" is enabled on the main component holding the tabs, to make the spacing consistent, and so that when you show a tab's content, the other tabs will automatically move to accomodate it.

Each tab is a group consisting of:

1. The header, with the tab title.
2. The content, with text or whatever else you want in there.

When a tab is closed, the content part with the text is hidden & only the header is visible. To show a tab, you simply enable the content element / group.

When prototyping, in each state, you must wire the tab headers to point to the appropriate state of the master component. You will have to do this for all 5 states.

There are a lot of extra things you can do to make it more high-fidelity. In the video I've made the tab header and the content into components on their own, so that I can more easily control & change the content. I've given the header a different appearance when you hover over it, and when it's opened or closed.

This is all visible in the video. Hopefully with this explanation here you will be able to make more sense of it.

[Rafael30902263yca8]

@Spas K.

, Thank you so much for your tutorial. It has been very useful.

I am trying to adapt what I have learned from it to prototype a website that will have multiple accordion elements on each page. The goal is to use the stack feature to push each block of content down when expanded.

It seems that what I have done so far works well on the design mode. However, prototype mode the expanded content overlaps the content below it.

Would you have an idea to solve this issue?

[Syeds]

@Rafael30902263yca8 

It seems you either do not have the content from the closed tab positioned below your content for the open tab or the text there but hidden. I would copy the text box content when the tab is closed and paste it into the tab in its open state. The make sure to position it under the text content so it is visible when the tab is in its open state. Make sure the text is positioned/visible and present in the open state. 

[Rafael30902263yca8 · Accepted solution]

Thank you for your answer, @Syeds 

[Syeds]

@Rafael30902263yca8 

Glad to help. I would not under estimate AdobeXD too soon.  I have learned that you have to be very creative and selective when making prototypes. It is actually very powerful. Just as @Spas K. says, ordering and nesting your components is key to how your prototype behaves. I have created very complex to very simple ones.

[Rafael30902263yca8]

Thank you, @Syeds.

[Spas K.]

Hi @Rafael30902263yca8 , sorry for the late reply. Unfortunately, the stacks feature isn't dynamic and is only usable in the design phase. It's used to space & arrange elements easily, but once you play the prototype, each element's position on the page is recorded, and only prototype interactions & animations make them move, disregarding the stack rules. I know it's confusing.

For your design to work, the text below the expanding tab will have to go inside your component. This way, it will also be controlled by the default and open state, and moved accordingly. A component interaction cannot control or move elements outside of it. Because of this limitation, whatever element on your page you'd like to move along with the component will have to be inside of it as well.

If you have 5 other elements below that expanding tab which will have to move down when you open it, they will all have to be inside the tab component and all of its states.

[Rafael30902263yca8]

Thank you so much for your answer, @Spas K. I am new to Adobe XD, I found it to be very useful to create wireframes and overall design. However, it seems that it is quite limite to prototype. I believe that I will keep creating my prototypes with Elementor Pro instead of Adobe XD.