How to build an accordion menu with switch and text below?

[Captain.svsc]

Hello everyone,

I am currently trying  to build an accordion menu. Here I have two problems:

1. Problem:

Below the accordion menu is text. As soon as I open an accordion item and the accordion menu grows, it overlays the text that is placed below the accordion menu. How can I make it that the text below the accordion moves with it instead of overlaying?

2. Problem: 

An accordion consists of different items. These items are divided into 'header' and 'content' (which is visible or invisible for the User depending on the interaction). Now I want to implement a switch in my header element so the User can click on the header once to expand and collapse the content and additionally he has the possibility to make settings with the help of the switch to approve or reject the content. Here I always have the problems that the switch does not work  properly, but sometimes also reacts to the fade in and out of the content. I already have chosen different interactions for both areas. Do you know any advice?

I would be very grateful for your help. I am slowly very desperate. 

Many thanks in advance.

<Title renamed by moderator>

[Spas K.]

Hey there. Not sure if what you want to do is currently possible with Xd's capabilities. Essentially, between the different tab states, the switches are always off by default. Xd doesn't remember what states you changed in the nested components, so when you switch to some state, it always goes back to the overall condition of everything inside that state, including the states of nested components.

On the other issue with the text, I would have to see how you've set it up inside the file, so feel free to upload it somewhere and share it here so I can check it out. I got a rough tutorial on that case which might give you some ideas, although it seems you've got it mostly right.

[Captain.svsc]

Thank you for your quick reply.
I already used your tutorial to build the accordion menu. That was already a very big help, thanks for that.

Switch:
I already suspected it but hoped that a prototyping tool like Adobe XD can do it anyway. But it's already good to have someone else confirm the guess.

Text below:
I once provided you the file as a WeTransfer link.

https://wetransfer.com/downloads/d0d2fc455b6d1b862fdd6bec981ddf3d20220626082611/258f88639455c52ccbd5...

Thanks for your help. 🙂

[Spas K. · Accepted solution]

Hey, think I misunderstood the other issue. If it's just that one piece of text that you want stuck at the bottom no matter what other tabs are opened or closed, you just need to add it as a 4th tab within the stack inside the accordion, with the exception it won't have any interactions and no header. It can't be outside and be 'pushed' by the growing accordion, since Xd doesn't support dynamic relationship between top level elements like that.

[ChellaStation]

Spas K. Maybe you can help me. I trying to do like an accordian drop down menu. I have three sections: 1-3 have been successful to go to the next page, after the drop down. I have create an arrow to go back to the main menu. However, when I click on the 2nd row and the 3rd row to make sure the page and forth on the main menu is smooth (before going to the next page), The drop down for the second row does not come down and would jump to the next page for the 1st section. Can you tell me what I am doing wrong? This is a project for a client.