How to Make Tabs With HTML, CSS and Javascript

Tabs are a great way to organize content on a web page. They make it easy for users to find what they’re looking for.

In this post, you’ll learn how to create tabs using HTML, CSS, and JavaScript.

Tabs HTML Structure

First, let’s start with the HTML structure for your tabs.

You have a div container that holds two buttons for the tab links, and two div elements for the tab contents.

Each tab content div should have a unique id that corresponds to the id of the tab link button.

Example

<div id="tabs">
  <button class="tab-link" id="tab1-link">
    Tab 1
  </button>
  <button class="tab-link" id="tab2-link">
    Tab 2
  </button>
  <div class="tab-content active" id="tab1">
    <p>
      Tab 1 content goes here. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Eligendi adipisci quae asperiores ex iure nulla? Earum
      magnam nihil dolorem quos animi deleniti quo repudiandae iure impedit?
      Enim adipisci atque expedita.
    </p>
  </div>
  <div class="tab-content" id="tab2">
    <p>
      Tab 2 content goes here. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Eligendi adipisci quae asperiores ex iure nulla? Earum
      magnam nihil dolorem quos animi deleniti quo repudiandae iure impedit?
      Enim adipisci atque expedita.
    </p>
  </div>
</div>

Basic Tabs Styling

Next, you’ll add some basic CSS styles to hide all tab contents by default and to style the active tab link:

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-link.active {
  background-color: lightgray;
}

Basic Javascript Tabs

Now that you have the HTML and CSS set up, let’s add the JavaScript to make the tabs functional.

Start by selecting the tab links and tab contents, and creating a function to show a specific tab when it is clicked:

const tabLinks = document.querySelectorAll(".tab-link");
const tabContents = document.querySelectorAll(".tab-content");

function showTab(tabIndex) {
  // hide all tabs
  tabContents.forEach(function(tab) {
    tab.classList.remove("active");
  });
  // reset active class on all tabs
  tabLinks.forEach(function(tab) {
    tab.classList.remove("active");
  });
  // show the selected tab
  tabContents[tabIndex].classList.add("active");
  tabLinks[tabIndex].classList.add("active");
}

Finally, we’ll add an event listener to each tab link that calls the showTab function when the link is clicked:

tabLinks.forEach(function (tab, index) {
  tab.addEventListener("click", function () {
    showTab(index);
  });
});

With these steps, you should now have a functional set of tabs that allow users to switch between different sections of content. Try adding more tabs and customizing the styles to fit your needs.

Bonus Features

In the previous part of this post, we went over the steps to create a basic set of tabs using HTML, CSS, and JavaScript. In this section, we’ll look at some additional features you can add to your tabs to enhance their functionality and usability.

1. Automatically Switching Tabs

You can use JavaScript to automatically switch between tabs based on a timer or on page load. To do this, simply call the showTab function with the desired tab index in your code. For example, to switch to the second tab after 5 seconds, you would add the following code:

setTimeout(function () {
  showTab(1);
}, 5000);

2. Smooth Animation with CSS Transitions

To make the switch between tabs more visually appealing, you can use CSS transitions to animate the change. First, add the following styles to your CSS file:

.tab-content {
  transition: all 0.5s ease-in-out;
}

This sets a 0.5 second transition time for all properties on the .tab-content elements. You can adjust the transition time and easing function as desired.

3. Adding Additional Tab Styles

You can customize the look and feel of your tabs in any way you like using CSS. For example, you could change the background color, font, or padding of the tab links, or add a border around the active tab link.

/* Tab Link Styles */
.tab-link {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-bottom: none;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

/* Active Tab Link Styles */
.tab-link.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  font-weight: bold;
}

/* Tab Content Styles */
.tab-content {
  padding: 20px;
  border: 1px solid #ddd;
  border-top: none;
  background-color: #fff;
  display: none;
}

/* Show Tab Content for Active Tab */
.tab-content.active {
  display: block;
}

You can also use CSS to add a background color or image to the tab content areas. The possibilities are endless!