• Choose a category
• All
• Classic-Fiction

3. Create a div that contains the entire collapsible content.

Put all the collapsible content in a single div with an ID. You’ll be turning this div into an accordion jQuery element.

4. Add an anchor around each heading you want to specify as collapsible.

Place an empty anchor tag () around each heading that you want to use as a collapsible heading. The # sign indicates that the anchor will call the same page and is used as a placeholder by the jQuery UI engine. You can add the anchor directly in the HTML or through jQuery code.

5. Create a jQuery init() function.

Use the normal techniques to build a jQuery initializer as shown in Chapter 3 of this minibook.

6. Apply the accordion() method to the div.

Use jQuery to identify the div that contains collapsible content and apply accordion() to it:

function init(){

$(“#accordion”).accordion();

}

Building a tabbed interface

Another important technique in Web development is the use of a tabbed interface. This allows the user to change the contents of a segment by selecting one of a series of tabs. Figure 5-3 shows an example.

Figure 5-3: This is another way to look at that hauntingly familiar table of contents.

In a tabbed interface, only one element is visible at a time, but the tabs are all visible. The tabbed interface is a little more predictable than the accordion, because the tabs (unlike the accordion’s headings) stay in the same place. The tabs change colors to indicate which tab is currently highlighted, and they also change state (normally by changing color) to indicate that they are being hovered over. When you click another tab, the main content area of the widget is replaced with the corresponding content. Figure 5-4 shows what happens when the user clicks the book 3 tab.

Figure 5-4: Clicking a tab changes the main content and the appearance of the tabs.

Like the accordion, the tab effect is incredibly easy to achieve. Look over the code:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”css/ui-lightness/jquery-ui-1.8.1.custom.css” />

Tab Demo

The mechanism for building a tab-based interface is very similar to the one for accordions:

1. Add all the appropriate files.

Like most jQuery UI effects, you need jQuery, jQuery UI, and a theme CSS file. You also need access to the images directory for the