javascript tabs

How To Make JavaScript Tabs With CSS And HTML

by

One popular feature that web developers often incorporate is JavaScript tabs.

These tabs allow users to navigate through different sections of a webpage seamlessly.

If you’re interested in learning how to make JavaScript tabs, you’ve come to the right place!

In this comprehensive guide, we’ll walk you through the process step by step, ensuring you have all the knowledge and tools necessary to implement this feature successfully.

What is JavaScript Tabs?

JavaScript tabs are a user interface element commonly used on websites to organize content into distinct sections.

They allow users to switch between different sections of content without having to load separate webpages.

Additionally, each tab represents a specific section, and when clicked, the corresponding content is displayed while hiding the content of other tabs.

JavaScript is utilized to add interactivity and functionality to the tabs, making them an excellent tool for enhancing user experience.

Types of Tabs you can create

Here are some common tab styles/layouts used in user interfaces:

  • Standard Tabs: Horizontal row of tabs at the top.
  • Pill Tabs: Rounded rectangular tabs.
  • Vertical Tabs: Tabs positioned vertically on the side.
  • Accordion Tabs: Collapsible tabs, one open at a time.
  • Scrollable Tabs: Horizontal tabs with scroll option.
  • Icon Tabs: Tabs with icons instead of or alongside text labels.
  • Dropdown Tabs: Tabs displayed in a dropdown menu

Why Should You Use JavaScript Tabs?

JavaScript tabs offer several advantages that make them a popular choice for web developers.

Here are some compelling reasons to consider using JavaScript tabs on your website:

Improved User Experience

JavaScript tabs provide a seamless and intuitive way for users to navigate through different sections of content on a webpage.

This enhances the overall user experience and makes it easier for visitors to find the information they need.

Space Efficiency

By using tabs, you can effectively organize and display a large amount of content within a limited space.

This is particularly useful when dealing with information-heavy websites or pages where scrolling can become cumbersome.

Faster Loading Times

JavaScript tabs eliminate the need to load multiple webpages when accessing different sections of content.

This can significantly improve loading times, resulting in a snappier and more responsive website.

Easy Customization

JavaScript tabs are highly customizable, allowing you to tailor their appearance and behavior to match your website’s design and requirements.

You can modify colors, styles, and animations to create a unique and visually appealing user interface.

How to make Javascript Tabs?

Creating JavaScript tabs may seem like a daunting task, but with the right guidance, it can be a straightforward process.

In this section, we’ll explore the step-by-step approach to making JavaScript tabs.

Step 1: Setting Up the HTML Structure

The HTML structure provides the foundation for your JavaScript tabs. It involves creating a container element and defining the tabs and their corresponding content.

Here’s an example of the HTML structure:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="src/style.css">
</head>

<body>
  <h1 id="header"></h1>
  <div class="tabs-container">
    <ul class="tabs">
      <li><a href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
      <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1" class="tab-content">Content for Tab 1</div>
    <div id="tab2" class="tab-content">Content for Tab 2</div>
    <div id="tab3" class="tab-content">Content for Tab 3</div>
  </div>


  <script src="src/script.js"></script>
</body>

</html>

In this example, we have a container element with a class of “tabs-container.” Inside the container, we have an unordered list (<ul>) with a class of “tabs.”

Each list item (<li>) represents a tab and contains an anchor (<a>) element with an href attribute pointing to the corresponding content div.

The content divs have unique IDs and a class of “tab-content.”

Step 2: Styling the Tabs with CSS

After setting up the HTML structure, it’s time to style the tabs using CSS.

This step allows you to customize the appearance of the tabs to match your website’s design.

Here’s an example CSS code to get you started:

.tabs-container .tabs li {
  display: inline-block;
  margin-right: 10px;
}

.tabs-container .tabs li a {
  text-decoration: none;
  color: #e41111;
  padding: 5px 10px;
  border: 1px solid #bb0a0a;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
}

.tabs-container .tabs li a:hover {
  background-color: #15f169;
}

.tabs-container .tab-content {
  display: none;
  padding: 10px;
  border: 1px solid #1511e6;
  border-top: none;
}

This CSS code styles the tabs and their corresponding content. It sets the tabs to display inline-block, adds padding, borders, and border-radius for styling.

The content divs are initially hidden with display: none and revealed when their corresponding tab is clicked.

Step 3: Adding JavaScript Functionality

The final step involves adding JavaScript functionality to make the tabs interactive.

This step ensures that when a tab is clicked, the corresponding content is displayed while hiding the content of other tabs.

Here’s an example JavaScript code to achieve this behavior:

const tabs = document.querySelectorAll('.tabs-container .tabs li');
const tabContents = document.querySelectorAll('.tabs-container .tab-content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // Hide all tab contents
    tabContents.forEach(content => {
      content.style.display = 'none';
    });

    // Show the clicked tab content
    tabContents[index].style.display = 'block';
  });
});

In this JavaScript code, we select all the tabs and their corresponding content elements using querySelectorAll.

Then, we add a click event listener to each tab. When a tab is clicked, we hide all the tabcontent elements by setting their display property to “none“.

We then show the content of the clicked tab by setting its display property to “block“.

This way, only the content of the active tab is visible, while the rest remain hidden.

Here is the putout by following the steps above:

Javascript tabs output

Note: You can now customize the code depending on what is suitable for your liking.

To learn more about JavaScript functions here are other resources you can check out:

Conclusion

In conclusion, JavaScript tabs are a powerful tool for organizing and displaying content on your website.

By following the steps outlined in this guide, you can create interactive and visually appealing tabs that enhance user experience.

Remember to customize the styles to match your website’s design and test your tabs across different browsers.

With JavaScript tabs, you can provide a seamless navigation experience for your users and make your website more engaging and user-friendly.

Leave a Comment