Skip to main content
Participant
February 8, 2023
Question

Accordion menu overlapping over other components

  • February 8, 2023
  • 1 reply
  • 769 views

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!

    This topic has been closed for replies.

    1 reply

    AkinGn
    Community Expert
    Community Expert
    February 9, 2023

    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!

    Participant
    February 9, 2023

    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
    Community Expert
    Community Expert
    February 10, 2023

    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