Accordion menu overlapping over other components

[Michael28287424l8tc]

I've created a page with multiple accordion drop-down menus. The drop-downs are placed one above the other. In Prototype mode, the drop-down menu above will cover the other drop-down menu below when clicked. Is there any way to get the drop-down menu below the first to shift down when the first one is clicked?

I've also tried to combine multiple drop-down menus as one component, but this isn't a viable solution. I'm trying to create multiple dropdowns, stacked above each other, each with the ability to be clicked independently without closing the other. 

Hope that makes sense and thanks for the help!

[AkinGn]

Hi @Michael28287424l8tc, I think making the whole accordions a big component and creating a seperate state for each accordion item might help, I saw an example very well explained in this tutorial: https://www.adobe.com/products/xd/learn/design/layout/faq-page-design.html That's how I'd resolve it, hope this helps!

[Michael28287424l8tc]

Thanks! I'll follow that tutorial and see if that helps. My question is, will each of the accordion drop-downs operate independently? For example, will I be able to open multiple dropdowns independently from the entire component?

[AkinGn]

I'd say it'd make the prototype complicated, if you're aiming that to be in the developed version you can just give the info about it seperately, since as I said you'd have to create component states for all the open-closed combinations (1-open, 1&2 open etc) it'd be too complicated, this way you can resolve it at least with states for each accordion element. That's what I think, hope this helps