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.

learn more… | top users | synonyms

2
votes
1answer
137 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
114 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 ...
4
votes
2answers
73 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 ...
0
votes
1answer
57 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 ...
24
votes
5answers
10k 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 … ...
1
vote
0answers
18 views

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

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?
0
votes
1answer
112 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 ...
2
votes
2answers
166 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 ...
0
votes
2answers
229 views

Unlimited scrolling via an accordion

I have two panels on the right side of the search page where I am splitting it by an accordion. Now, I am struggling with is that whether we should pursue infinite scrolling or pagination in this ...
3
votes
3answers
236 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 ...
1
vote
1answer
139 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
910 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
101 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
216 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 ...
1
vote
1answer
542 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 ...
1
vote
3answers
215 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 ...
2
votes
2answers
305 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 ...
0
votes
1answer
200 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 ...
2
votes
3answers
309 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 ...
0
votes
2answers
438 views

Popover or accordion for data editing

I am developing a UI for a web app and don't know to decide between a popover and an accordion patterns. Basically what I have is a list of of sentences, some of them have an item which users should ...
0
votes
1answer
342 views

Expand / collapse all buttons above accordion

I have a typical accordion with 7 items that can individually expand or collapse. I want to place a collapse all and expand all button above the accordion, but it seems kinda misplaced if it is just ...
1
vote
1answer
696 views

Expand/collapse all - Combined or separate button(s)?

Note: This isn't a question about which icons or labels to use. It's purely about usability. So, I have a page with expandable panels and I want to add a button to expand/collapse all panels. Now, I ...
6
votes
3answers
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. ...
5
votes
3answers
619 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 ...
30
votes
4answers
9k 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: http://stackoverflow.com/questions/5690589/difference-between-accordion-and-tabs (I ...
1
vote
1answer
202 views

Which is more intuitive to open content when the arrow is on the right, arrow pointing in or out

When looking an expandable panel, such as those which one might find in an accordion and considering the situation where the arrow is positioned on the right hand side of the element which is to open, ...
1
vote
3answers
268 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 ...
16
votes
6answers
13k 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 ...
1
vote
1answer
1k views

Conventions for expanding accordions

It seems like there is a lot of variations and confusions about the control element used to expand and collapse panels or sections of a page. I believe some refer to it as a 'twistie' and others call ...
1
vote
1answer
412 views

Accordions or anchor links for grouped content?

I am torn between 2 UI patterns for how to present text content that is broken up into large chunks. This is a pattern I'd like to use across the site, so it could be for things like FAQs as well as ...
3
votes
2answers
6k views

Accordian 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: ...
5
votes
1answer
282 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 ...
3
votes
4answers
382 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 ...
55
votes
7answers
8k 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 ...
-1
votes
1answer
297 views

Sidebar UX improvements

Dear UI Experts, What are the best ways which I can improve this sidebar. I feel like its too bold and maybe its good UX wise. I want to know what it lacks visual wise and UX wise. This is an ...
2
votes
1answer
172 views

Should the link in search results open the page in a specific state - e.g. with accordion open or with modal open?

I recently found a great write-up about SEO and anchored links . In particular, I found the following to be very helpful: For longer or more complex pages, search engines frequently create ...
4
votes
3answers
882 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 ...
0
votes
1answer
224 views

How Do I Show a Static List of Countries Without Using an Accordion?

I make a new web application. My web application shows the Country property with an accordion. I want to find a new way for showing this data. Because all countries, amounting to 190, is a lot of ...
4
votes
2answers
742 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 ...
1
vote
3answers
3k 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. ...
2
votes
3answers
401 views

Accordions to View More Content

I'm auditing a site and came across a section that has a list of core attributes for the organization. On load, the first one is open, and then the rest expand whe you click/tap, with whatever one ...
2
votes
1answer
204 views

Listing of a schedule/itinerary

I've searched for the discussion about tabs and accordion and the differences between them. I'm currently designing a layout for an application displaying the itinerary for a holiday/vacation. I'm ...
3
votes
1answer
115 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 ...
2
votes
0answers
541 views

Expandable\accordion table row example [closed]

I would like to to present the users with a set of data, in a table\grid and when they click on a row, instead of taking them to another page with a form, to expand the row (like accordion) and show ...
6
votes
5answers
775 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. ...
0
votes
2answers
265 views

Is an accordion worse than a grid?

I am building an author site for myself, and would like to display, for each book, the cover image, the title and an enticing blurb, and links to (say) four other books that might be of interest. ...
6
votes
2answers
355 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
vote
3answers
313 views

Would it be a good or poor user experience if I guide users through a wizard and not let them see it again?

I'm currently designing the UX for an event travel site. It starts off with the organizer registering and then it goes right into the "wizard" where it functions like an accordion -- broken up into a ...
16
votes
2answers
2k 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?
3
votes
2answers
612 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 ...