Chapter 3. Tabs and Accordions

A tab is a way of separating content, yet keeping it easy to flick from one piece to another, similar to the labels in a binder.

In a web browser's main application, the tabbed areas are completely separate web pages. In a web page, though, the information is usually related, for example various pages of a form.

An accordion is similar to a tab. It separates parts of related data so that only one piece of data is visible at a time. Throughout the chapter, when I speak about tabs, the same information can usually be applied to accordions as well.

The main visual difference between the two is that, with tabs, the handles for flicking between the various pages of data are kept either horizontally or vertically along an edge of the tabbed area. However, with accordions, the handles are more akin to chapter headings, as they are shown interleaved with the pages.

Another visual difference is that with a tab, the tabbed area immediately shifts to the newly selected area, but with an accordion, the shift is shown as an animation—the old page slides closed as the new page slides open.

Accordions are similar to "code folding" in an IDE, in which you open only the part of the data that you're interested in reading, and the rest stays closed until you need it. This makes it very easy to find the piece of data or text that you were looking for, without wading through the rest.

Implementation-wise, the two are similar—you need to display the data, place markers to indicate the page/tab changes, and then run a script to make it all work.

In this chapter, we will have a look at the following points: