Skip to main content
j.khakase
j.khakase
Inspiring
January 23, 2020
Answered

[Design]-How to design accordion component with single artboard in XD?

  • January 23, 2020
  • 4 replies
  • 29496 views

Hello,

 

How can we design accordion component as shown below. with single artboard

https://www.w3schools.com/howto/howto_js_accordion.asp

 

any tutorial please

 

<The Title was renamed by moderator>

    Correct answer tobiglaus

    Great solution !

    Now how to prevent it from jumping up and down ?

    Add something like a ghost item to constraint the size ?


    You can do that pretty easily (without a ghost element): 

    Select all elements/groups within the component (not the component itself) and move it up to the same Y-position as the opened state.

    The accordion should now be top-aligned. 

     

    The trick I'm using here is that you can reposition the whole component by moving the inner elements, without affecting the other states.

    4 replies

    E
    Engr Abdul Rehman5E2F
    Participant
    June 28, 2021

    Hi,
    You can design by using adobe photoshop. I have created all design-related stuff for my website by using this tool. My website name is advertising agency nyc

    You can check my website

    L
    Lively_determination98A6
    Participant
    June 10, 2020

    Thank you so much for the share. This is excellent.

    Peter Villevoye
    Community Expert
    Peter VillevoyeCommunity Expert
    Community Expert
    January 24, 2020

    [EDIT June 2020] It's indeed very well possible !

    See the other answer in this thread with sample file.

     

    - - - - 

     

    You can't, at least not within one screen.

    With the new Component States you might be able to mimic the appearance of one single menu opening and closing, but you can't prepare it to work for all menus, and let the previewing user just choose any arbitrary menu to open or close.

     

    Eventually, an accordeon will typically be able to work technically well within one single web page or app screen. But that's not how Adobe XD works, nor what you're goal should be in the design stage. You're showcasing a predefined flow, designed by using an artboard for each step in the process.

     

    So these artboards represent each interaction, even within a single page or screen. E.g. you could mimic how a user opens menu C of the accordeon first, then A and finally B, and subsequently picks submenu B2, ending up in another screen. This flow of interactions would require 5 artboards...

     

    You're creating a design, a mock-up at best, not the whole blueprint for the development.

      HARSHIKA_VERMA
      Community Manager
      HARSHIKA_VERMACommunity Manager
      Community Manager
      January 23, 2020

      Hi there,

       

      Thank you for reaching out. You may check out this tutorial here:https://www.youtube.com/watch?v=g2QJfHcqyLU&list=PLx5PTsBocuvSbsF37JOENREPbVvyPwsqF and let us know if that helps.

       

      We would also suggest checking this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/34693864-collapsible-sections-vertical-accordion and add your vote if you find it useful.

       

      Thanks,

      Harshika

      j.khakase
      j.khakaseAuthor
      Inspiring
      January 24, 2020

      Hi Harshika,

       

      Thank you for the reply.

      I was seen these tutorial before post my query. the issue is still remain. I want to create it with/within Single Artobard. to save time on creating prototype and update them later.

       

        T
        tobiglaus
        Participating Frequently
        November 11, 2020

        Hi and thanks for the solution which unfortunately doesn't work for me. Can you please clarify that for me or ideally upload that XD file? I am NOT able to achieve the same result in any way.

         

        Are those "sections" (do you mean those buttons with title by that?) components within one big component? When creating OPEN states for each button (section), do I do it within the MAIN component or do I edit the inside components Title 1 to Title 4? Because in Prototype mode if I make an interaction for a single section, the rest of sections obviously doesn't move a bit.

         

        If I create all states within the main component (State 1 = The first section is open, the rest moves below that one, State 2 = The first section is closed, the second open, 3rd and 4th are closed and below the open 2nd etc....) then in Prototype I click the First section within the main component, there are no such states (the states of main component) available in Destination.

         

        As I understand it, the actions are not interconnected between the upmost component and its inside components, so how did you do it? 🙂

         

        Thank you.


        I did a short video on how I did it. The dropdowns don't appear in the screen recording (don't know why), but I hope it's still clear.

        https://shared-assets.adobe.com/link/8f1ba6b5-a1fb-4147-6152-2dfdccd8916f

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices