Skip to main content
C
Captain.svsc
New Participant
June 25, 2022
Resuelto

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

  • June 25, 2022
  • 1 respuesta
  • 2193 visualizaciones

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>

Este tema ha sido cerrado para respuestas.
Mejor respuesta de Spas K.

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.

 

1 respuesta

Spas K.
Spas K.
Community Expert
June 25, 2022

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.

    C
    Captain.svscAutor
    New Participant
    June 26, 2022

    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/258f88639455c52ccbd5f8e9ad9b558e20220626082640/fa5702

    Thanks for your help. 🙂

      Spas K.
      Spas K.Respuesta
      Community Expert
      June 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.

       

        Términos y condicionesAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices