Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

An accordion is a stacked list of item references (e.g. labels or thumbnails), where each item can be "expanded" or "stretched" to reveal more content associated with that item. Typically only one item can be expanded at a time, and expanding a second item causes the last opened item to be closed.

0
votes
2answers
46 views

Accordion with multiple target

We all know how accordion work, as set by the web. You have a list of items, each containing sub content. We also know that the standard for accordion is to have a single interaction on the top items:...
0
votes
0answers
30 views

Is it good to use an accordion for dynamic generated content?

We have an application where we separate its content into two "categories", read-only information and read-write inputs. Each element will be categorized in one of them and will be displayed a little ...
1
vote
2answers
110 views

Multiple Steps WITHIN a Multi-Step Accordion Form

I'm designing a multi-step accordion form flow for a package shipping process. The users fill out their "to" and "from" information easily in separate accordion sections, but the third section ...
2
votes
2answers
109 views

Nested accordion shouldn't close parent when working in child

Our accordion currently works as follows: If you click on an item inside the accordion it opens the accordion if there is content under it and it opens a screen next to it. If you click on an open ...
0
votes
1answer
106 views

Tabs in Accordion

I have a card with an accordion with 2 related but separate functions. I'm cautious about a design pattern that puts Tabs in Accordion to seperate this functionality. Firstly its not something you ...
0
votes
0answers
59 views

Use of 'swipe to reveal' within accordion menus

I have primary list items that can be tapped on to invoke an accordion menu to display X number of secondary list items below the primary list item. I would like to add swipe right-to-left ...
0
votes
3answers
241 views

Should I use the accordion with long text?

We design the help centre for our product. We have an idea to put each long articles, instructions and the form to leave feedback to accordions. Will be it convenient for users? I think that if there ...
2
votes
3answers
128 views

Radio buttons within Accordion

Newbie here. At item creation, the user needs to select one of the available descriptions. They are grouped by Category. Categories are self exclusive and users are trained so choosing category is ...
0
votes
2answers
190 views

How to group a long list of items on 1 mobile app page?

One of the applications I work on is required to display a long list of items. The list page must display a list of line item labels and their corresponding values. The user can select some of the ...
1
vote
1answer
490 views

Accordions on iOS, and Android

Back in the day, Accordions for web apps were quite common. We built a Silverlight app, and it has a very Accordion-centric workflow. The content is mainly divided up in to Accordion panels because a) ...
1
vote
1answer
102 views

How to structure a page that contains a lot of information? [closed]

So what we have is a page that shows a list of "Vehicles" and the Passengers inside them. Imagine that each "Header" is a Vehicle and when you click the accordion button, it will expand to show the ...
1
vote
4answers
1k views

Alternatives to accordion menu's in mobile UX?

Please see below. I currently have these accordion menus. Is this ideal for mobile or is there a better way? thanks! Sam
1
vote
2answers
153 views

Accordion menu, ok to have duplicate names under different category?

In an accordion menu, is it confusing to use the same name in two separate category? Especially in one where the menus will be expanded by default. Just to demonstrate I have a vertical navigation ...
2
votes
1answer
319 views

Is accordion for huge list recommended or not?

I am working on an interview dashboard (admin side) and I need to know your feedback on accordions with a long list. The list of candidates can reach up to 100 items. Do you suggest that I use an ...
1
vote
3answers
247 views

Should accordions have previous and next buttons?

I personally think that accordions should not have next or previous buttons, which is different to a wizard, where there is a specific order in which data must be entered. Moreover, this might end ...
1
vote
1answer
330 views

Most intuitive accordion action icon

There's a lot of buzz and fuzz about the icon usage for an accordion header (state changing button). After a short research, I came to the conclusion to use up and down arrows and I was wondering if ...
5
votes
2answers
3k views

Difference between caret and chevron

Is any functional difference between a caret and a chevron? Our discussion is about what should we use to dropdown and accordions... Should they be different? Thank you
1
vote
3answers
163 views

Having a separate accessible page for screen reader users

I have been working in the accessibility of an accordion that is used to take user input from checkboxes and return a list of criteria based on the user input. We are using Outsystems and have not ...
1
vote
2answers
883 views

collapsible panel and delete button in a web application

I'm developing a web application and I need some advice on where to place the delete button Users can create, modify or delete items arranged as a list of vertically aligned elements. Each element ...
1
vote
1answer
149 views

How many levels should an accordion have?

As a guidance how many levels should an accordion have ? I have an issue of working on a site that currently does as deep as four levels. resulting in inconsistent interaction styles with each ...
4
votes
2answers
856 views

Minimalistic expandable / accordion menu button style

I'm trying to make a sidebar/panel to filter products and overall I use minimalist/flat design. Here is the layout, collapsed and expanded. My problem is, as you can see, the accordion button (filter ...
1
vote
2answers
152 views

Accordion boxes add to click total

Hello I have a form that consists of 7 accordion boxes. Inside each accordion are a set of select boxes pertaining to that accordions question.The user has to click to open the accordion and then ...
3
votes
2answers
1k views

Alternative to many tabs besides accordion/expander

I have 2 levels of data. Menu and Food. My current design looks like this which is taken from ui-cloud.com The problems I had with this design are: It assumes the number of menus are fixed when it ...
1
vote
3answers
473 views

Complex form: Accordion + vertical navigation menu + back/next

I have seen some wireframes from some colleagues asking the user to fill out some very complex forms. They have seperated the forms in "sections" (which is a good idea). Further they introduced a ...
0
votes
1answer
54 views

What’s the consensus on signaling the open/close state for an accordion menu? [duplicate]

Should the caret point down when the menu is down, or point up? See example.
2
votes
3answers
189 views

What is the best initial state for an accordion menu?

The options are as follows: The user encounters all buckets “closed” The user encounters the menu with the first two buckets “open”. My client insists that option 2 increases affordance, but I’m ...
1
vote
2answers
344 views

Accordion interaction

I'm designing for an enterprise level software. The software is a repository for different departments to store their files. The content types are Dashboard and Reports but inherently both of them are ...
1
vote
2answers
575 views

If a design uses two columns of accordion menus, should the expansion of one column affect the other?

I am creating a design that uses two columns of accordion menus, when a user expands one menu, should both sides expand, or should only the column that is active expand? Option 1 Option 2 I'm ...
2
votes
1answer
134 views

Mobile menus does it matter which pattern you use

Ive been looking at different types of mobile menus systems/patterns and notice three main ones being used, Off canvas, drill-down or accordion. Is there a rule to which one you should use or is it a ...
4
votes
2answers
1k views

Alternative to checkbox matrix

I'm a developer designing a portion of a UI the allows the user to select certain configuration options. There are 4 different sections that can be configured. Select countries, and then languages ...
5
votes
2answers
778 views

Accordion with radio buttons

one of my clients uses the following accordion on his mobile website: A tap anywhere opens the section and selects the radio button. The chevrons open and close the selection, but only select the ...
1
vote
1answer
787 views

Wizard pattern vs. Accordion pattern in a long form

Wizard pattern (multi-step) vs. Accordion pattern in a single long form? Q1. What is the best pattern to chose for the following scenario Scenario In an Admin console, Admin have to create an ...
1
vote
2answers
751 views

Alternate UX / UI for accordion in Mobile Development

I am not a big fan of accordion in mobile development, because I believe that this behaviour is a web style user experience. However, I don't have any resource to find an alternative solution for this ...
0
votes
1answer
166 views

Delete an item in an Accordion

Just wondering where the most conventional location for a delete button on an Accordion item should be? Are there just 2 valid options? And which one is more conventional? 1. On the Item: [item x ...
0
votes
2answers
375 views

Multiple preferences 3 layers deep

I'm trying to come up with a solution for the problem that is the ability to select multiple preferences with upto 3 layers deep. The primary layer would affect the options shown for layer2, and ...
1
vote
3answers
501 views

Expandable grid interaction

I am designing a grid and need to accomplish two actions when clicking on a row: 1) navigate to a detail page for that row information 2) open an accordion "drawer" with more information. I am a ...
2
votes
0answers
41 views

Is there any way that multiple select can be applied to deactivate or disable random member in a group? [closed]

Is there any way that multiple select can be applied to deactivate or disable random member without affecting the group which is also can be deactivated?
4
votes
1answer
341 views

Multiple select from a 2-levels category - how?

Assumed I need to provide a way to select items from a 2-level hierarchy. The simplest way is to have a long list of sets of checkboxes (each with a name) - that's great for discovery of the variety ...
0
votes
1answer
804 views

Substitute for tabs in mobile website

I have a set of tabs that appear in my website. When making it responsive i cannot use tabs as i have 5-6 tabs and the width will exceed the screen size. What is the best suitable substitute for a tab ...
4
votes
2answers
121 views

Is there a downfall to using collapsible panels for a contacts list, rather than linking to an additional profile page?

Right now our site has a Contacts page with a list of contact profile names which link to a separate profile page. My team suggested we design an accordion style (expand/ collapse) list for our ...
2
votes
2answers
1k views

Pagination with Accordions

I am using accordions in a table where the rows expand to reveal more information about the selected row. While from an information perspective this is working well because we are being able to give a ...
3
votes
4answers
880 views

Fixed Sidebar with Accordions

I've been constructing a page with a fixed sidebar, that has lot of info placed into collapsed accordions.When user remains at the top of the page ,all is well, he can expand the accordions ,say 5 ...
1
vote
1answer
238 views

Horizontal Accordian on website - Best usability practices

I'm designing a website and have a section which contains two categories. These two categories work like a slider (or a horizontal accordion). The default state is the two categories are represented ...
11
votes
3answers
2k views

Which accordion Identifiers work best?

which accordion identifiers make more sense? Plus and Minus OR up & down arrow chevrons I'd be very interested to see if anyone has any analytics or proofs on these concepts. As always, ...
1
vote
1answer
267 views

Create new record and add (lengthy) details in one step? (Accordion Forms)

I was hoping to solve this data entry problem with an accordion form, but now I'm not so sure if this is the right way to do it. I am concerned that information might get lost if I place the save ...
3
votes
1answer
814 views

Multi page vs single page to complete a form? (not for ecommerce checkout)

How to create a form with ~15 fields for a buying used clothes site, single or multi page? I saw other debates & older forums, but im not still convinced. Im leaning towards one page, or maybe ...
2
votes
1answer
5k views

Are expandable/collapsable accordions in iOS an anti-pattern?

I'm trying to find examples of expandable/collapsable accordions in iOS but I cannot seem to find any. I haven't seen any official statements from Apple but it seems as if all native apps prefer menu ...
2
votes
2answers
723 views

Are there disadvantages to using an accordion instead of a carousel?

I am required to use carousels very often in our designs - sometimes as many as 4 separate carousels on a homepage. To increase engagement & conversions with website visitors (and of course ...
1
vote
3answers
394 views

Single user registration vs multiple users registration form

I'm working on a registration process and have wireframed a single user registration process (see below my wireframes). We want to promote our product and encourage users to invite others. In a first ...
0
votes
1answer
598 views

Alternative to accordion for large search filters?

In theory, using an accordion to minimize screen height of search filters is a good idea, but it seems that our target users completely overlook it. So, we end up with users that are unaware of the ...