Questions tagged [accordion]
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.
111
questions
77
votes
9
answers
25k
views
How should you show that an accordion is expanded?
When you have an accordion, you need some way of showing the current state is expanded.
There are a number of different ways of handling this, and each is used by a number of respected websites and ...
- 67.8k
41
votes
6
answers
38k
views
Which way should arrows point in a collapsible accordion? Left/down … down/up?
What is the best way to indicate that it's possible to open and close an element accordion-style?
Arrow pointing left/arrow pointing down
Arrow pointing down/arrow pointing up
Plus sign/minus sign
… ...
- 633
41
votes
4
answers
19k
views
accordions vs tabs
What is difference between accordions and tabs from the UX point of view?
This is repost from this thread on SO: https://stackoverflow.com/questions/5690589/difference-between-accordion-and-tabs
(I ...
- 1,052
19
votes
6
answers
24k
views
When is it bad practice to use an accordion control?
I've been using Accordion controls in many design situations...
I find them useful for:
Progressive disclosure of long wizards (reduces number of pages)
Questionnaires where you want to be able to ...
- 2,406
19
votes
2
answers
1k
views
Senior Usability and Navigation
Does anyone have any current resources for senior usability? I'm specifically researching navigation: tabs and accordions. The Jacob Nielsen site has a report that's over a decade old. I'm looking for ...
- 383
17
votes
2
answers
3k
views
What is the name for the horizontal tabs expanding / contracting kind of navigation?
Can somebody tell me if there is a name for this kind of tab navigation implementation?
- 307
13
votes
4
answers
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, ...
- 662
13
votes
4
answers
882
views
Accordion in a webapp - Should I allow more than one open?
I have several long forms in my web application.
I thought about using an accordion design to save unused space in the form (The form is already split into several sections)
download bmml source &...
- 499
11
votes
4
answers
31k
views
Difference between caret and chevron
Is there any functional difference between a caret and a chevron? Our discussion is about what should we use for dropdowns and accordions and whether they should be different.
- 1,327
8
votes
3
answers
24k
views
Accordion anchor click vs header click
jQueryUI Accordion opens and collapses when the header is clicked: http://jqueryui.com/accordion/
Twitter Bootstrap accordion opens and collapses when the anchor tag inside the header is clicked: ...
- 233
8
votes
5
answers
3k
views
Why would you use SlideDeck (horizontal accordion) instead of a carousel?
I'm reviewing a client's site and their designers have used an unusual element to present some of their key points. The element is called SlideDeck and it's basically an accordion menu that is turned ...
- 13.2k
8
votes
3
answers
11k
views
What is the correct usage for toggling triangle icons (down/up) on a click-to-reveal link?
I'm working on a UI where users can toggle a button to show or hide a div. On the 1st click, the div appears below the button with a slide-down effect. On 2nd click, the div slides up to hide.
...
- 81
6
votes
3
answers
2k
views
What's wrong with +/- accordion controls?
I have to implement an accordion control in a system I'm building.
Looking around, most people are suggesting using arrows for the control. However, to me a plus and a minus seems far more intuitive. ...
- 3,060
6
votes
3
answers
3k
views
Usability of nested accordions
I have seen some interface designs that nest accordions that show/hide information at more than one level of hierarchy.
The example show also uses both vertical and horizontal hierarchies to add ...
- 25.8k
6
votes
2
answers
437
views
Mobile navigation
A responsive approach has been taken to the current project I am working on. It is a corporate website with 3 levels of navigation. Attached is an example of the solution I have come up with for drop ...
- 1,370
6
votes
2
answers
2k
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 ...
- 61
6
votes
5
answers
1k
views
Accordion Menu or Static Menu Options for Touch Screen optimization
I'm in the process of redesigning dialog menus for our application. The biggest reason is to make the application touch friendly. But these menus will be used in both touch and mouse environments.
The ...
5
votes
2
answers
2k
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 ...
user83018
5
votes
2
answers
3k
views
Positioning the Open/Close Caret
While most of the more recent examples I've seen around the Web seem to prefer placing an open/close carat icon before its corresponding menu/selection label, there seems to be no standard on whether ...
5
votes
2
answers
10k
views
Tabs or Accordion (collapsible / expandable) content sections [duplicate]
Possible Duplicate:
accordions vs tabs
What would the most user friendly experience be to display a the content of a long web page? Display it as collapsible and expandable content sections. Or ...
- 59
5
votes
3
answers
17k
views
How to handle very long accordions?
I have condensed a rather long list of items into an accordion so that only the titles are initially visible and the accordion expands to show the details. The list contains the main content of the ...
- 885
5
votes
3
answers
3k
views
Keep accordion open or closed?
I am working on a mobile website, and was just wondering is it better UI to keep accordions opened or closed.
So when users switch from one accordion to the other, should the first one close ...
- 493
5
votes
1
answer
335
views
What's the most preferred navigation type?
I'm creating a website for streaming music, viewing lyrics, music videos, photos, artists, reviews, news, etc.
I've been wondering, what do users like best?
I've been caught between
a basic drop ...
- 51
5
votes
2
answers
803
views
Using accordion lists with radio buttons
I am designing a UI for a popup that would allow the user to share a post with one class at a time and select which class. They should also be able to drill into each class and select all or certain ...
- 190
4
votes
1
answer
109
views
When an accordion or collapsible panel is open, are there any concerns with having the header BELOW the panel?
According to this article, an accordion is composed of headers and panels as follows:
I will refer to a single one of these elements, with a header and panel, as a “collapsible panel”.
Below is part ...
- 175
4
votes
1
answer
554
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 ...
- 153
4
votes
2
answers
152
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 ...
- 41
4
votes
3
answers
2k
views
Should I use accordions within a multistep form?
Am looking into crafting an accordion for a multistep form. Like the idea of a single page walkthrough that provides anticipation (ie. what's about to come) and affirmation (ie. what's happened), but ...
- 43
3
votes
2
answers
1k
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 ...
- 302
3
votes
1
answer
8k
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 ...
- 31
3
votes
4
answers
905
views
What is an alternative for a horizontal accordion?
I currently have a vertical accordion in my design that is working for me. I have a potentially large number of top level items that I can load on-demand, and each accordion section has probably 10 ...
- 133
3
votes
2
answers
551
views
Is there a proper name for the accordion-like stacked panels?
Essentially, it's a collection of panels, stacked towards the top. Each can be expanded or collapsed on its own. When a header is expanded, the headers below it "stick" to its bottom. This is in ...
- 4,978
3
votes
4
answers
2k
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 ...
- 329
3
votes
1
answer
1k
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 ...
- 111
3
votes
2
answers
2k
views
Category and tagging organization
Background
Looking to present tagged recipes (edit: that users have tagged themselves on their own recipes) in a way that makes them easy to find. All tags are automatically categorized; recipes may ...
- 225
3
votes
3
answers
12k
views
Alternatives for accordion when displaying a long list of subject/descriptions
I'm helping someone improve a website where they are currently using a JQuery UI accordion to display a long list of commands, revealing what they do when clicked.
http://stats.neurobots.net/botstats....
- 641
3
votes
1
answer
154
views
Best way to indicate a new cycle (of a set of actions)
I'm building a feature where the user is asked to send customized messages to their friends. The process involves two steps:
Selecting a friend (will have autocomplete / suggestions)
Selecting ...
- 173
3
votes
1
answer
4k
views
Accordion or drop down menus?
I am in middle of a confusion, where I am not able to choose between accordion menus and drop down menus?
I have a menu of links, just the way I have shown in below Wire frame. [Learning Apps]
On ...
- 395
3
votes
0
answers
41
views
How to deal with the interaction from a collapsed summarized list to a expand full-list? [closed]
Hopefully I can explain it well, but we provide products on our website, which have a lot of product details available. But for most of the people, it's mainly about the key features. And as we have a ...
- 560
2
votes
4
answers
2k
views
How to display save/cancel actions in an accordion
I'm in the middle of designing a setup flow and have decided to go for an accordion paradigm (due to the large amount of steps, using tabs would result in tab overflow in mobile devices). Upon ...
- 411
2
votes
4
answers
1k
views
Best way to make user complete each accordion of content
I have a page with a number of accordions on the page that are used to group certain items together and take up less screen space.
I want the user to know to have to go through each accordion to ...
- 167
2
votes
2
answers
800
views
Should an open accordion section be hidden when the user clicks on another section?
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 ...
- 642
2
votes
2
answers
2k
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 ...
- 356
2
votes
3
answers
812
views
Accordion registration form - Should the user be able to go back to the previous step?
I'm working on a step by step registration form. We are exploring an accordion style approach at the moment. (Below are my wireframes.)
Because we are using inline validation, the user cannot go to ...
- 1,697
2
votes
2
answers
1k
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 ...
- 123
2
votes
3
answers
342
views
Should I leave white space inside accordion?
I'm building some web editor for charts and decided to group various independent chart options inside accordion. A question poped up about whitespace inside contents of some accordion panes. Basically ...
- 123
2
votes
4
answers
5k
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
- 207
2
votes
2
answers
3k
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 ...
2
votes
1
answer
1k
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 ...
- 121
2
votes
2
answers
2k
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 ...
