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

Question

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>

tobiglaus · Accepted Answer

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.

Peter Villevoye · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded