Recipe 8 Swapping Between Content with Tabbed Interfaces

Web Development Recipes,, Second Edition — Pragmatic Programmers (21 / 65)

👈 Creating an HTML Email Template | TOC | Accessible Expand and Collapse 👉

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.

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 that we can have as many tabs as we want so that our design is flexible. In the end, we’ll have something that looks like this:

We’ve been asked to display product descriptions in multiple languages in an attempt to reach a wider audience. We’ll build a simple proof-of-concept page so we can determine the best approach.

Let’s start by building out the HTML for the elements we want to show our users. As a proof of concept, let’s use two pieces of text, one in English and one in its Latin translation. To start, we create this index.html file to set up the basic structure of our elements:

Related posts:

I got really lucky early on when a mentor gave me the best decision making tool of my life. I was just two years out of college, working for Harris Bank in Chicago, when I was having lunch with a…

Caress my curiosity Scratch my interest Pinch my admiration Tap my respect Slap my love Punch my passion Kick my desire Hit my dream I started writing this using a sense of contradiction between the…

6. Once you understand that money is a means and not the goal, it will be easier for you in business. 7. Have friends with goals that. thinking out of. the box and you wil see you challenge yourself…