• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
3

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

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

TOPICS
Design , How to

Views

26.4K

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 2 Correct answers

Community Beginner , Jun 09, 2020 Jun 09, 2020

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

Votes

Translate

Translate
Community Beginner , Jun 10, 2020 Jun 10, 2020

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.

Votes

Translate

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

Votes

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
Contributor ,
Jan 23, 2020 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.

 

Votes

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

 

Votes

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
Guest
May 21, 2020 May 21, 2020

Copy link to clipboard

Copied

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

Votes

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

Votes

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

Votes

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
Community Expert ,
Jun 10, 2020 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 ?

Votes

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

Votes

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

Copy link to clipboard

Copied

Thank you so much for the share. This is brilliant

Votes

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

 

Votes

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

Votes

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

Votes

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
Community Expert ,
Jun 19, 2020 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

 

Votes

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

Copy link to clipboard

Copied

Thank you very much, it works!

Votes

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
Community Beginner ,
Oct 26, 2020 Oct 26, 2020

Copy link to clipboard

Copied

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.

Votes

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
Community Beginner ,
Nov 11, 2020 Nov 11, 2020

Copy link to clipboard

Copied

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

Votes

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
Community Beginner ,
Nov 11, 2020 Nov 11, 2020

Copy link to clipboard

Copied

Thank you for your time and video! It's great.

Votes

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
Community Beginner ,
Feb 19, 2021 Feb 19, 2021

Copy link to clipboard

Copied

I can't thank you enough for this. Literally made my day.

Votes

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 ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

Hi. I am so glad I found your explanation. I am fairly new to XD. When you write that all sections are "closed" what does that mean? I can only find "hide". How do you close all sections?

Votes

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
Community Beginner ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

Hi 🙂 There's no automatic way to close all sections. With "all sections are closed" I mean that you design the default state with no sections open (just all section titles under each other with no content). Then create a 2nd state where section 1 is open (with some content in it), then a 3rd state where section 2 is open, and so on... When you got all states in your component, you link them/add interaction like in the video I posted above. 

All the arrangement and design stuff for the states you have to do manually.

Votes

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
Community Expert ,
Jan 24, 2020 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.

Votes

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

Copy link to clipboard

Copied

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

Votes

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 28, 2021 Jun 28, 2021

Copy link to clipboard

Copied

LATEST

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

Votes

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