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

New Here ,
Jun 25, 2022 Jun 25, 2022

Copy link to clipboard

Copied

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>

TOPICS
Design , How to , Prototyping

Views

202

Likes

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

Adobe Community Professional , Jun 26, 2022 Jun 26, 2022

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.

 

Likes

Translate

Translate
Adobe Community Professional ,
Jun 25, 2022 Jun 25, 2022

Copy link to clipboard

Copied

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.

Likes

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
New Here ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

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

Likes

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 Community Professional ,
Jun 26, 2022 Jun 26, 2022

Copy link to clipboard

Copied

LATEST

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.

 

Likes

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