difference between accordion and tabs

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.com/demos/

For me they serve pretty same purpose (to hide complexity), except accordion is IMHO better for开发者_如何学Go "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)

According to repost on UX, accordions has fixed height and they has to fit in whole screen (see example) - this is important because of easiness of selecting diferrent sections any time (we don't want to scroll up/down to select other section as I thought). I've completely missed that.

Tabs on the other hand can have different heights (although it's better idea to have them fixed too and provide scrollbars). Tab headers unlike accordion ones stays at their place after selecting.

Accordions are best suited for mobile devices, where is not enough space for horizontal tabs and vertical tabs would need user to spin his head in order to read 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.