Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 know accordions are usually vertical, while tabs horizontal, but I could imagine both of them in opposite orientations)

Right now it feels like accordion is better suitable for touchscreen-devices.

share|improve this question
add comment

2 Answers

up vote 11 down vote accepted

Good question!

  1. Tabs have unlimited height and they can span a number of screens, while an accordion must fit on one screen. It's not a technical limitation, of course, but it would be a terrible idea to make an accordion that expands away out of my field of view, because then I'd have to scroll down to click the next "bar", just to have it expand up and then scroll back up in order to view it.
  2. Tabs can have different sizes (I think it's bad practice - unless they're so large that you don't notice them having different size - but they can), and accordion elements are bound to the same size. You could potentially make an accordion that changes it size for different elements, but I think such people should be flogged (edit: ok, unless it's done really well).
  3. With tabs, your means of navigation are located very closely to each other and they always stay on the same spot. You can go through them quickly. With accordions, every time you click, you change the locations of the navigation triggers and you move them way to the other side of the control.


4 - Accordions are more "experiential" - you can animate the transition between the slides easily, it's fun and it makes sense. Animated transition between tabs is very rare, it's never done with "traditional tabs" - the ones with the actual tab label at the top - and it's usually just images replacing each other, not the cool slide effect you get with accordions.

5 - You can trigger accordions with mouseover. You don't do that with tabs.

6 - As a result of the mouseover option, an accordion can be a means of navigation by itself (reveal with mouseover, then click to navigate), while tabs almost always display content.

7 - With accordions, you can display some of the content from each element in the default state, and you can make sure that some content is always visible. With tabs, just the label for each slide is always visible.

The accordion on this site demonstrates many of these points - examine its behavior and see how you can't do any of it with tabs.

share|improve this answer
Thx for answer, sounds like accordions are meaningful only for mobile-devices (or anywhere, where width is limited), right? –  Kamil Tomšík Apr 17 '11 at 18:50
@Kamil, no, I wouldn't say that. Accordions are "sexier", they are often used on corporate websites, they're great for showing off stuff like selling points. If you want your homepage to feature 5 banners for the 5 primary strengths of your company, you'll often stick them in an accordion. They're also often used on desktop apps - look at the left panel of the Skype settings dialog. BTW, they succeeded in making an accordion that does change its size and it looks good, so that's a caveat for what I said about the flogging. I also added some more points to the answer. –  Vitaly Mijiritsky Apr 18 '11 at 4:57
I agree about sexiness, I also agree that they can be used for hover-menus, but for my specific use-case tabs are IMHO better choice (I have multiple sections through which I need to be able navigate quickly), thx for replying, will remember your points! –  Kamil Tomšík Apr 18 '11 at 9:42
Vitaly's answer is already quite sophisticated. I just want to add this: Accordion: You can keep more than one element open. This can be an advantage when you have expert-users that want to keep certain elements open and don't mind to scroll. –  Andreas Jan 22 '12 at 18:43
add comment

Tabs give a clear indication that it contains some data, but an Accordion (especially the very styled ones) will look like a piece of information or decorating text or something...some user may not even click at the accordion to know if its contains something.

Reference: Self experience as user & web designer.

share|improve this answer
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.