JavaScript and JQuery: Interactive Front-End Web Development

11

CONTENT PANELS

Content panels allow you to showcase extra information within a limited space. In this chapter, you will see several examples of content panels that also give you practical insight into creating your own scripts using jQuery.

In this chapter, you will see how to create many types of content panels: accordions, tabbed panels, modal windows (also known as a lightboxes), a photo viewer, and a responsive slider. Each example of a content panel also demonstrates how to apply the code you have learned throughout the book so far in a practical setting.

Throughout the chapter, reference will be made to more complex jQuery plugins that extend the functionality of the examples shown here. But the code samples in this chapter also show how it is possible to achieve techniques you will have seen on popular websites in relatively few lines of code (without needing to rely on plugins written by other people).

ACCORDION

An accordion features titles which, when clicked, expand to show a larger panel of content.

MODAL WINDOW

When you click on a link for a modal window (or “lightbox”), a hidden panel will be displayed.

RESPONSIVE SLIDER

The slider allows you to show panels of content that slide into view as the user navigates between them.

TABBED PANEL

Tabs automatically show one ...