Chapter 3. Using the Tabs Widget

Now that we've been formally introduced to the jQuery UI library, the CSS framework, and some of the utilities, we can move on to begin looking at the individual components included in the library. Over the next seven chapters, we'll be looking at the widgets. These are a set of visually engaging, highly configurable user interface widgets.

The UI tabs widget is used to toggle visibility across a set of different elements, with each element containing content that can be accessed by clicking on its tab heading. Each panel of content has its own tab. The tab headings are usually displayed across the top of the widget, although it is possible to reposition them so that they appear along the bottom of the widget instead.

The tabs are structured so that they line up next to each other horizontally, whereas the content sections are all set to display: none except for the active panel. Clicking a tab will highlight the tab and show its associated content panel, while...