How to create tabs with HTML, CSS, and JavaScript

Overview

CSS tabs are navigation elements that are used to link users to more content on the website. It enhances the user experience on the webpage by letting them switch between information and content. Any browser is the best example of multiple tabs, though tabs in websites are quite a bit different from browser tabs.

Pre-requisites

Creating the Togglable tabs

Digital togglable css tabs are like physical binders. They are used to show multiple parts of the same topic in a single frame. Let us now see how we can create a toggleable tab using HTML, CSS, and JavaScript as shown above. For simplicity, we can include all the codes in a single file using <style> and <script> tags. Any tab will be consisting of the title which will be displayed all the time and the content which needs to be displayed as per the user selection.

The webpage as shown above will be consisting of two tabs, football, and basketball. These tabs will present pictures of respected sports. We are going to implement tabs using a bootstrap navigation bar and tabs. It is possible to implement tabs without bootstrap as well using HTML buttons and CSS.

Add HTML

We will first create the title part of the tab which is consistent and the user can click on them to switch the tab content. Next, we will write content for each tab.

In the code above, we are first creating two navigation items using the class nav-item inside nav nav-tabs. These items contain links that are calling the JavaScript function showImages() along with the name of the item selected.

In the later section, a few images for both sports are added using the row and column structure of bootstrap that defines the number of images one single row can have.

Note: class for both the sports i.e. Football and Basketball is the same but their id is different and the id is used to pass to the function showImages().

Add CSS

We will be using css for tabcontent and the img class.

The tabcontent class display is set to none which hides all the content. Later JavaScript is used to show its content as per the selection of the tab by the user.

Add JavaScript

JavaScript is mainly used to show the content according to the tab selected. This code is going to be the same for all the examples below. A minor change will be in the name of the function only.

We first store all the elements of the class tabcontent in an array. Then we traverse the array to hide all the content, then change the status of the link, and lastly, only the selected item is displayed and its link is changed to active.

More exciting examples of Interactive CSS Tabs

The above example was a simple one and many improvements can be brought only using CSS and JavaScript.

Create Toggleable CSS Tabs

Let us now learn to create tabs in HTML without depending on bootstrap. We will be creating three tabs, each tab will be colored. In the content section, the same color should be displayed as the background. HTML Let us create 3 buttons for three different colors, i.e. red, green, and blue.

Each button in the above code belongs to the class tablinks, and each content part belongs to the class tabcontent. We are calling JavaScript function colorPage().

CSS In all three tabs, their id is different so we can set the background color for each id. We will be defining CSS properties for tabcontent and tab button to beautify them.

JavaScript

JavaScript code first takes all the available unique tabs. It then hides them all and shows content for the one selected. It also sets the selected button to an active state.

Show a tab by default

As in all the examples we have seen so far, in the beginning, none of the content is shown. But when we visit professional websites, there is always a default tab that is displayed. We can also decide on a default tab to display using JavaScript.

The above JavaScript code is run each time a user refreshes or loads a page. Default tabs id is to be passed to getElementById() and set its display to block. Initially display for tabcontent is none in the CSS code thus all the item's display is none. Now JavaScript code changes the default display to block. Later user can switch to any tab.

Glowing Tabs

We will be creating glowing CSS tabs giving a shadow effect to the border of the buttons we are using to represent the tab. The selected tab will be highlighted using the glowing effect using CSS.

We will be adding CSS, HTML, and JavaScript code in the same file. HTML will describe the content and the title. CSS will give the glowing effect using the shadow property and JavaScript will let us switch between tabs. We are taking the example of different types of trees in programming. Four tabs contain four diffenet trees and their key points.

In CSS styles, the shadow effect is used only for the tab that is focused. Shadow defines various properties like position, opacity, shadow length, etc. HTML and JavaScript perform their respective functions. The list is used in HTML to display information about each tree in the content section of the tabs.

Fade in Tabs

In this section, the fade animation effect will be used for the content of the respective tab. Below CSS code must be added to achieve the fade functionality.

The tabcontent class has an animation that links to the fadeEffect keyframe. Keyframes define how the given item will change from one set of CSS styles to another gradually. In animation, time is also mentioned which denotes how much time it should complete the transition.

Close a tab

We can also let users close all the tabs on the webpage. This can be done with the help of JavaScript and HTML. CSS code will be the same.

HTML

CSS

In each tab content, we are supposed to define a close link. Each of the close links modifies the display of tabcontent class to none, or in simple words hides all the content. CSS code is used to place the close symbol at the top right corner.

Nav Tab

Navigation CSS tabs let the user navigate through the entire website from a single place. Let us see an interesting example of a shopping website where we will be using svg icons as tabs.

In the example above, the font we have used is "Raleway" for all the tabs, their titles, and content which is imported from google fonts.

Next, we are using CSS to place the buttons in the right position and make them perform actions when they are clicked or hovered.

All the buttons are of the same class tablinks and we call shopping functions with their respective ids. Each button is not assigned any text, instead, an SVG file is used. This SVG file acts as an icon.

Each of the icons when selected presents a title and its description.

JavaScript code defines the default tab and provides switching between tabs to the users.

Conclusion

CSS tabs on the webpage can be created using CSS and HTML. To provide switching between tabs JavaScript is a must.
In HTML, the title of the tabs i.e. constants on the webpage, and the content which is unique for each tab which is a variable are to be defined.
All the tab titles are either links or buttons. They must belong to the same class but call JavaScript with the id respective to their content.
Each content tab must belong to the same class but their ids should be uniqur=e. This id is to be passed to the JavaScript function in the title section.
JavaScript defines a function for displaying the default tab, closing all tabs, or switching between tabs.
For switching, it first creates an array of all the ids of the class. It then removes all the content. After that, it removes the active from the previously active element. Now it sets the display of the passed id as block and adds active to it.
CSS is used for positions, fonts, and animation like fade-in tabs or glowing tabs.