| Recipe 8 | Swapping 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 ...
Get Web Development Recipes, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
