Book Excerpt: Adding an Ajax Accordion

Efficient use of valuable space with open-source code

This article is excerpted from Adding Ajax

, by Shelley Powers, and is reprinted by permission of O'Reilly Media Inc. All rights reserved.

Horizontal Spacing: The Accordion

One of my favorite Ajax space effects has been called the accordion, based on both the appearance and behavior of the effect. Two or more blocks of content, typically called panels, are stacked horizontally and hidden using one of three approaches:

  • The display of each elements is set to none.
  • The elements are clipped completely along the vertical axis.
  • The height of each elements is set to zero.
Adding Ajax Cover

When the accordion is first displayed, what typically shows for each panel is a title or label for each block with some visual icon indicating that the web page reader needs to click the title to expand (or collapse) the panel. From an implementation standpoint, the labels and panels are separate but associated elements that may or may not be embedded in a container, all of which can be combined and embedded in yet another container. The accordion makes efficient use of space, especially when used with a long multipart form. Additionally, it's a simple effect to work around if JavaScript is disabled. When scripting is turned off, all panels are expanded when the page is loaded. Figure 5-1 shows a typical accordion with the first and third panel expanded, and the second collapsed. I'll demonstrate how to create this application in this section.

Figure 5-1:  Accordion effect with three blocks

Figure 5-1: Accordion effect with three blocks

(Click image to see larger view.)

Creating the Effect

The simplest approach to managing the expansion of the panel is to use the CSS property display. Setting the display to block shows the panel and, incidentally, pushes the rest of the page contents down to make room for the object. Setting the panel's display to none removes the block from display and the elements below it move up to fill in the space.

An accordion may also have indicators within the title area for each block that signal an activity associated with clicking on the title bar. Most often, these include a plus sign (+) to indicate that hidden material can be expanded and a negative sign (-) to indicate that the material can be collapsed.

TIP: Some accordions don't use a visual indicator, relying on the web page readers to "intuitively" figure out that they can click directly on the accordion label to control the effect. Unless the context provides enough information, it's better to use some explicit indicator of hidden content.

An accordion starts with two or more stacked panel blocks, each with an associated title bar. The CSS for the panel blocks is set to display:block (default CSS setting for div elements), so if scripting is disabled for the page the blocks will display as completely expanded when the page loads.

1 2 3 4 5 6 7 Page 1
Page 1 of 7
Shop Tech Products at Amazon