How to Build a Responsive Tab Component With CSS and a Touch of JavaScript

How the tab component looks like on small screens
Want create site? Find Free WordPress Themes and plugins.

In this tutorial, we’ll learn how to build a responsive tab component with CSS and a little bit of JavaScript. It’s absolutely possible to create pure CSS tab components, but for this example let’s put our JavaScript skills into practice.

Here’s what we’re going to build, in a few large steps:

Note: This tutorial won’t focus on how to make the tab component accessible, so exploring accessibility would certainly be a valid next step.

1. The HTML

To begin with, let’s examine the required markup. We have a container which includes the tabs themselves (list items), as well as the content for each tab (tab panels). To associate a tab with the corresponding panel we use the data-index custom attribute which holds a unique value for each tab panel. That said, because of Zero-based numbering, a panel with data-index = 0 is associated with the first tab, a panel with data-index = 1 is associated with the second, and so on.

Here’s the HTML markup:

2. The CSS

As a next step, let’s specify a few CSS rules for our component. Nothing too fancy, just some basic styles. One thing to note is that we don’t use any transitions (e.g. fade, slide) to toggle between the tab panels; instead these appear and disappear with a simple on/off switch.

Here are the initial styles:

3. The JavaScript

With the HTML and CSS in place, it’s time to look at the required JavaScript code.

Each time we click on a tab, we do the following things:

  • Remove the active class from the corresponding tab (by default the first one) and the associated tab panel (by default the first one).
  • Find the li parent of this tab, add the active class to it, and retrieve its index.
  • Find the tab panel whose attribute value (for the data-index attribute) matches the aforementioned index value and assign the active class to it.

Here’s the resulting JavaScript code:

4. Going Responsive

Our component is almost ready! The last thing we have to do is to make the component responsive. So, for instance, when the viewport has a maximum width of 600px, it should collapse and look like this:

How the tab component looks like on small screens

As we’re using a desktop-first approach, these are the CSS rules that we have to overwrite: 

5. Browser Support

Our demo works well in all recent browsers and devices. As usual with my tutorials, we use Babel to compile the ES6 code down to ES5.


In this short tutorial, we managed to create a useful responsive tab component with HTML, CSS, and JavaScript. Again, this component isn’t properly accessible, but if you want to enhance its functionality, that would be a good next step. Happy coding!

Website Design Myrtle Beach

Website Design Myrtle Beach

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

Your email address will not be published. Required fields are marked *