DEV Community

Gift Egbonyi
Gift Egbonyi

Posted on

Create a Simple Tabbed Component with HTML, CSS & JavaScript

#htmlcss #javascript #dom #tabs

Hey friends!

It's another Mini-Tutorial Wednesday and this week, we're learning how to build a tabbed interface, a UI pattern used in dashboards, profiles and apps all over the web.

What’s a Tabbed Component?

It lets users switch between different sections of content, without reloading or navigating away from the page. Think of it like flipping between open folders.

Step 1: Set up the HTML 

<div class="tab-container">
  <div class="tabs">
    <button class="tab active" data-tab="home">Home</button>
    <button class="tab" data-tab="about">About</button>
    <button class="tab" data-tab="contact">Contact</button>
  </div>

  <div class="tab-content active" id="home">
    <h2>Home Tab</h2>
    <p>Welcome to the home tab!</p>
  </div>
  <div class="tab-content" id="about">
    <h2>About Tab</h2>
    <p>Here's a little info about us.</p>
  </div>
  <div class="tab-content" id="contact">
    <h2>Contact Tab</h2>
    <p>Contact us anytime. We’re always here!</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 2: Style the Tabs with CSS 

.tab-container {
  max-width: 600px;
  margin: 2rem auto;
  font-family: sans-serif;
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab {
  flex: 1;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  background: #eee;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.tab:hover {
  background: #ddd;
}

.tab.active {
  background: #333;
  color: #fff;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Add Tab Logic with JavaScript 

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    const target = tab.dataset.tab;

    tabs.forEach((t) => t.classList.remove('active'));
    contents.forEach((c) => c.classList.remove('active'));

    tab.classList.add('active');
    document.getElementById(target).classList.add('active');
  });
});
Enter fullscreen mode Exit fullscreen mode

Bonus Tip (Optional)

You can store the active tab in localStorage so when the page reloads, the last opened tab is still visible.

Try It Live!

Here’s the CodePen so you can:

  • See it in action
  • Tweak the style
  • Try adding more tabs

👉 Check it out on CodePen

🙋🏽‍♀️ Over to You!

  • Can you make the tabs slide instead of switch instantly?
  • What about switching tabs using keyboard arrows?

Let me know if you try it, I'd like to see yours! Connect with me on GitHub

Was this tutorial helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

✍🏾 I’m documenting my learning loudly every Wednesday. Follow along if you're learning JavaScript too!
Let’s keep learning together!

See you next Wednesday 🚀

Top comments (0)