javascript - difference between accordion and tabs - Stack Overflow

admin管理员组

文章数量:1290311

What are benefits of accordion over tabs and vice-versa?

Although both of them are supported in many Javascript UI frameworks/libraries, you can see example here: /

For me they serve pretty same purpose (to hide plexity), except accordion is IMHO better for "continuous-reading", it's easier to quickly go to next section, while Tabs seems to be more "random-access"

What's their benefits, when should I prefer one over the latter one? (from the UX point of view, I don't care about horizontal/vertical and html code differences)

What are benefits of accordion over tabs and vice-versa?

Although both of them are supported in many Javascript UI frameworks/libraries, you can see example here: http://jqueryui./demos/

For me they serve pretty same purpose (to hide plexity), except accordion is IMHO better for "continuous-reading", it's easier to quickly go to next section, while Tabs seems to be more "random-access"

What's their benefits, when should I prefer one over the latter one? (from the UX point of view, I don't care about horizontal/vertical and html code differences)

• javascript
• html
• jquery-ui
• user-interface

Share Improve this question Follow edited Apr 17, 2011 at 0:30 Kamil Tomšík asked Apr 17, 2011 at 0:18 Kamil TomšíkKamil Tomšík 2,43722 gold badges2828 silver badges3333 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

According to repost on UX, accordions have a fixed height and have to fit the whole screen (see example) - this allows for the easy selection of any section (we don't want to scroll up/down to select other sections as I thought). I've pletely missed that.

Tabs on the other hand can have different heights (although it's better idea to fix their height too and provide scrollbars). Tab headers, unlike accordion ones, stay in place after selection.

Accordions are best suited for mobile devices, where there isn't enough space for horizontal tabs and vertical tabs would require the user to turn their head to read the headers. "moving headers" are the form of necessary evil in this case.

The one advantage that an accordion has over tabs is that if you are splitting information into ordered steps or content that leads to the next bit of content and so on, when you finish reading, the tab to view the next part is right where your eye is, rather than having to go back to the top and click the next tab. This may not seem like a big deal, but it is similar to the reason vertically stacked forms are easier to use and cause less confusion than horizontally aligned ones. It is not always the best choice, but when you have ordered content, it is a lot easier to read it, and if you want to continue on, click immediately below where your eye already is.

The esthetic difference is that tabs represents clear separators of parts of the content while an accordion divides content.

All of that +

An accordion is animated and tabs aren't. And since accordions are lame and animations annoying... Tabs are your friends. Just make sure the URL defines whcih tab is opened.

本文标签： javascriptdifference between accordion and tabsStack Overflow