O'Reilly logo

Web Development Recipes, 2nd Edition by Chris Johnson, Mike Weber, Chris Warren, Brian P. Hogan

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

Recipe 8Swapping Between Content with Tabbed Interfaces

Problem

We sometimes have multiple, similar pieces of information that we want to display together, such as a phrase in multiple languages or code examples in several programming languages. We could display them one after another, but that can take up a lot of space, especially with longer content. We need to give our users an easier way to compare content, without taking up an unnecessary amount of screen space.

Ingredients

  • jQuery

Solution

We can use CSS and JavaScript to display the content on our page in a slick tabbed interface. Each section of content will have a tab generated for it based on a data attribute, and only one tab’s content will be displayed at a time. We’ll also make sure ...

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