O'Reilly logo

jQuery Cookbook by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

13.3. Expanding an Accordion

Problem

The situation in which one might use an accordion could be somewhat akin to when a file tree might be useful. The paradigms are similar in that each one allows for additional information to be initially obscured from view and then revealed as the user interacts further. They differ, however, in that an accordion is not meant to contain an entire taxonomy of data but rather is used more as a novelty to draw attention to several facets of a site or product. One such accordion example can be seen at http://www.apple.com/iphone. This allows for panels of info to be expanded at the user’s leisure, without completely dominating the vertical space allotted to the sidebar. It conserves space not unlike high-density shelving or movable bookcases in a library, allowing one aisle to serve several racks of storage versus having an ever-present aisle between each one.

It is worth noting that there is a jQuery UI accordion widget that is highly customizable and can be given a theme/skin to match the rest of the UI widgets. You can see it in action at http://jqueryui.com/demos/accordion. The benefit of using the official widget is that it is officially supported by the jQuery UI community and will continue to evolve and become more robust. The potential drawback is the amount of extra code required, if all you need is a simple accordion. On the flip side, the reason one might choose to build a custom accordion component is for a smaller code footprint. This comes ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required