JavaScript: The Missing Manual

Chapter 10. Expanding Your Interface

A Web page can feel like a long one-page brochure. Visitors are overwhelmed if there seems to be acres of text and pictures to scroll through, and they are unable to quickly get the information they need when they need it. It’s up to you to provide your visitors tools to find what they’re after. Using JavaScript, you can streamline your Web page and make it simpler for visitors to deal with—hiding content until it’s required, and providing easier access to information.

In this chapter, you’ll learn four common techniques to make your pages easier to read and use. Accordion panels and tabbed panels fit lots of information in a small space and let visitors click a tab to access content in smaller chunks. Tooltips—pop-up windows with additional information about moused-over links, form fields, and other HTML elements—provide supplemental information. Finally, sortable tables make data in your HTML tables more usable—visitors can sort the data right on the page by clicking a column header.

Hiding Information with Accordion Panels

Putting too much information on a page can overwhelm your visitors and make a Web page look crowded. JavaScript gives you many ways to present a lot of information in a small space. One technique is the accordion effect. An accordion lets you put content into separate panels, only one of which is visible at a time. When your visitor clicks a tab above a hidden panel, the currently visible panel disappears ...