How to make tabs in html

Learn how to create tabs in HTML using simple code and an example to enhance your website's user interface.

Creating tabs in HTML is a great way to organize content and improve the user experience on your website. Tabs allow users to easily navigate between different sections of a page without having to scroll through a lot of content. In this article, I will show you how to create tabs in HTML using simple markup and a bit of CSS.

HTML Structure

The first step in creating tabs is to set up the basic HTML structure for the tabs. We will use a combination of ul (unordered list) and li (list item) elements to create the tabs themselves, and then use div elements to contain the content for each tab.

<div class="tab-container">
  <ul class="tab-list">
    <li class="tab">Tab 1</li>
    <li class="tab">Tab 2</li>
    <li class="tab">Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="content">Content for Tab 1</div>
    <div class="content">Content for Tab 2</div>
    <div class="content">Content for Tab 3</div>
  </div>
</div>

CSS Styling

Once we have set up the HTML structure, we can add some CSS to style the tabs and make them functional. We will use CSS to hide all but the first tab's content, and then use JavaScript to switch between tabs when they are clicked.

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

JavaScript Functionality

To make the tabs functional, we will use JavaScript to add click event listeners to the tab elements and toggle the active class on the content elements when a tab is clicked.

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab');
  const tabContents = document.querySelectorAll('.content');

  tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      tabs.forEach((t) => t.classList.remove('active'));
      tab.classList.add('active');

      tabContents.forEach((content, i) => {
        if (i === index) {
          content.classList.add('active');
        } else {
          content.classList.remove('active');
        }
      });
    });
  });
});

With this simple HTML, CSS, and JavaScript setup, you can create functional tabs for your website. Feel free to customize the styling and functionality to suit your specific needs.