How to Code a Tabbed Box with JavaScript

In many situations, we need to find a balance between displaying all of the information a user could want, and keeping our UI as simple and clean as possible. One way to provide this balance is to use a tabbed box: let the users select which info they want to see at any given time and hide the rest behind other tabs.

Let's walk through the process of implementing a tabbed-box with minimal HTML markup and some JavaScript processing, and discuss the knowledge required to do so. The contents below will outline the individual pieces, then the code at the end will put it all together. If you'd like to skip the explanation and get directly to the code, feel free to do so by scrolling to the bottom. The video shown here shows the code being written in real time and the final product in action.

The video shown here is a part of our Web Dev with Music Playlist, where we code examples, such as this, in real-time and view the results as we go.

Demo the Live Example

The live example can be viewed in action on this page.

This example covers:

1. Defining the tab titles and contents within the HTML markup.
2. Using JavaScript to manage the creation of the tabbed box container and remove some redundant markup.
3. Using CSS to style the box contents.

Tabbed Box Requirements

In this example, we will create a simple, but fully functional tabbed box element. We want this tabbed box to behave according to the rules below:

• The tabbed box should allow for a variable number of tabs; the count should not be hard-coded.
• The element should only display contents of the currently selected tab.
• The user should be able to switch between selected tabs by clicking on tabs.
• We must always have one and only one tab selected at any given time.
• Selecting a tab which has already been selected should do nothing.
• We should be able to have more than one tabbed box instance if we want to. We'll outline how to create the tabbed box element and satisfy these requirements in the sections below.

Create the Tabbed Box Elements

There are a few different types of controls / elements we need to render in order to bring everything together:

• The container for the tabbed box.
• The individual tabs themselves.
• The contents corresponding to each tab. There are many ways we can create these elements. For this example, we'll use one way that will use JavaScript processing to allow us to write less HTML to specify the tabs and contents. Instead of creating individual tab elements, then indivial contents elements, we'll combine the two by creating elements with class tabbed-box to represent tabs with their contents. We'll use data-title as a custom attribute to specify the tab name to use for those contents:

Note that at this point, we do not have any actual tab elements. In the section below, we will use JavaScript to create those for us.

Creating and Processing the Tabbed Box

Now that we have our HTML together, we can use JavaScript to process the tabbed box, add tabs, and select a default tab to display. To accomplish this, we'll use a class. When we create a new instance, we'll pass in the id of the element which will be a tabbed box into it's constructor, and the class will process from there. In the code below, we will:

1. Select the tabbed box container which has the div id we've passed in and store it in a JavaScript variable.
2. Select all tabbed box elements within that container and store them in an array.
3. Create an element which will contain the new tab elements we are about to create.
4. For each tab box selected in the steps above, create a tab element and add it to our tab row.
5. Add the tab row itself to the container.
6. Mark that the container has been processed by changing it's class name to tabbed-box-container-processed.

In terms of JavaScript, we're almost done. We need to add one more piece of functionality: the ability to select different tabs. We'll have the tabbed box select the first tab by default upon its creation, then add a click listener to change the selected tab when the user clicks on a tab element. We'll use CSS class names to mark which tab is selected and which ones are not.

Styling the Elements for Proper Behavior

With the HTML and JavaScript in place, the behavior will "technically" work, but without the CSS, the tabbed box will appear broken. There are a few things we need to do with the CSS to fix this:

1. Make sure tabbed boxes are not shown until they are processed by JavaScript
2. Give the entire element a distinct border to seperate it from other elements on the page.
3. Make non-selected tabbed boxes hidden.
4. Make tabs themselves appear to be clickable (cursor) and have a hover effect. The minimal css below will allow us to satisfy these requirements:

Putting it All Together

When we combine the HTML, JavaScript, and CSS above, the following sequence of events will take place:

1. The tabbed box will be hidden when the document loads.
2. Some JavaScript will create a new tabbed box instance and provide the element id of the tabbed box.
3. The new instance will:
   1. Query each tabbed box within the container.
   2. Create a tab element for each.
   3. Add a click listener to select the corresponding tab contents when the tab is clicked.
   4. Use CSS classes to mark the currently selected box + that the processing has completed.
4. The tabbed box will now be visible and styled appropriately. The first tab will be selected by default.
5. When the user clicks on a tab, the selected tab will change via JavaScript CSS class name manipulation.