Highlighted

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

Community Beginner ,
Jan 23, 2020

Copy link to clipboard

Copied

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>

Community Beginner
Correct answer by tglaus | Community Beginner

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.

Topics

Design, How to

Views

2.5K

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

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

Community Beginner ,
Jan 23, 2020

Copy link to clipboard

Copied

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>

Community Beginner
Correct answer by tglaus | Community Beginner

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.

Topics

Design, How to

Views

2.5K

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
Adobe Employee ,
Jan 23, 2020

Copy link to clipboard

Copied

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-collapsib... and add your vote if you find it useful.

 

Thanks,

Harshika

🔥Premium Tutorials : 🔥 Udemy : https://bit.ly/3bJiajg Patreon: https://www.patreon.com/digitalartcreation In this Step by Step tutorial I show you how to cr...

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
Reply
Loading...
Community Beginner ,
Jan 23, 2020

Copy link to clipboard

Copied

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.

 

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
Reply
Loading...
Community Beginner ,
Feb 27, 2020

Copy link to clipboard

Copied

It actually is possible.

Create a component where all section are closed.

Then add a state for each section where it is open.

Then add interaction: When clicking section one, go to state one, section two to state two, and so on.

You gotta do this for every state.

Here's a quick demo: https://xd.adobe.com/view/eb0cc70f-4b5b-4f18-463d-07dd68d3d70c-9d3d/?fullscreen

 

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
Reply
Loading...
New Here ,
May 21, 2020

Copy link to clipboard

Copied

This is great - i came looking for the same thing as the OP. Thanks for sharing.

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
Reply
Loading...
Community Beginner ,
Jun 02, 2020

Copy link to clipboard

Copied

This is exactly what I’ve been looking for. Are you able to share the file so I can see how you got it to work. I haven’t been able to get the interactions to work as expected. 

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
Reply
Loading...
Community Beginner ,
Jun 09, 2020

Copy link to clipboard

Copied

Sorry for the late reply: I deleted the original file, so I had to do it again.

I uploaded the file to Google Drive: https://drive.google.com/file/d/1rxt5W-F9KUZZq0DjP_t-8aL9P9-uwXGo/view?usp=sharing

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
Reply
Loading...
Adobe Community Professional ,
Jun 10, 2020

Copy link to clipboard

Copied

Great solution !

Now how to prevent it from jumping up and down ?

Add something like a ghost item to constraint the size ?

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
Reply
Loading...
Community Beginner ,
Jun 10, 2020

Copy link to clipboard

Copied

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.

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
Reply
Loading...
Community Beginner ,
Jun 10, 2020

Copy link to clipboard

Copied

Thank you so much for the share. This is brilliant

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
Reply
Loading...
Community Beginner ,
Jun 18, 2020

Copy link to clipboard

Copied

Hi,

I am trying do use your info for my project but I find some difficulties.. I am trying to make a menu with expanded pages. I have created a component when all sections are closed. Then I aded a state for one page open. But when I try to add the interaction, I can't find it in the list. How am I doing that?

Please find attached how it appears.

Thank you very much.MENUS – 1.png

 

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
Reply
Loading...
Community Beginner ,
Jun 19, 2020

Copy link to clipboard

Copied

At the top right you can see the states of the component. In images 1 & 2 you got a state called "cards data expand", but in image 3 there's only a state "Hover State", which does appear in the interaction element list.

 

So maybe you just need to copy the master component again so you got the state "cards data expand". Then it should show up in the list like "Hover State" does.

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
Reply
Loading...
Community Beginner ,
Jun 19, 2020

Copy link to clipboard

Copied

Hi,

Thank you for your response.

Unfortunately, it doesn't work this way either..

I uploaded the menu in drive, maybe you can see something that I am missing?

Thank you so much! 

https://drive.google.com/file/d/1KWOtQFyqpsIKhjlWd-cJ7JgBKZCFQOhv/view?usp=sharing

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
Reply
Loading...
Adobe Community Professional ,
Jun 19, 2020

Copy link to clipboard

Copied

I already replied to you on the thread you posted, the problem is you can switch states of the wrapping component only if the trigger is attached to a group. You're trying to put it on another component, and it only shows the states of that inner component. Put your "Cards data" component in a group, and attach the action to that instead.

 

dstoic_0-1592557315507.png

 

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
Reply
Loading...
Community Beginner ,
Jun 19, 2020

Copy link to clipboard

Copied

Thank you very much, it works!

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
Reply
Loading...
Adobe Community Professional ,
Jan 24, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...
Community Beginner ,
Jun 10, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...