How to create tabs with HTML and jQuery

April 2020 | John Binzak
222336
How to create tabs with HTML and jQuery. Need a tabbed view for your website? Read how to create them here.
Just want the code? Find it here on

Lot's of information, so little space

Sometimes in web design, in particular web application design, you find yourself in a position where the amount of functionality and space it consumes, is larger than the user view port. But you want to keep all those buttons in one view without scrolling!

Expression Gif
Added from Giphy.

The solution is tabs

As you probably have already guessed, the solution is tabs! If you've used the internet before, then I think it's safe to say you've seen and used tabs before. If for some reason you haven't, there is demo gif below. P.S., that is also what we will be building.

Demo Gif
Pictured above is the example.

Solution in a snapshot

Essentially what we are building is some javascript that will hide or show certain elements based on a click. All of the views will be built in html and on the page, however they will not be visible until the javascript toggles it.

CSS/Javascript

First step: We need to make sure to load the CSS & Javascript on the page. We'll explain them later.

<!-- load css -->
<link href="./simple_tabs.css" rel="stylesheet">
<!-- load js -->
<script src="./simple_tabs.js"></script>

Tab Menu Items

Next we need to create our tab menu items. An example is below. There are 3 things you need to consider when building the menu:

<div class="toggle-menu">
    <div class="toggle-menu-item" data-togglegroup="primaryTabs" data-toggleid="hello"><label>Hello World</label></div>
    <div class="toggle-menu-item toggle-menu-item-deactive" data-togglegroup="primaryTabs" data-toggleid="blah"><label>Blah</label></div>
    <div class="toggle-menu-item toggle-menu-item-deactive" data-togglegroup="primaryTabs" data-toggleid="foo"><label>Foo Bar</label></div>
</div>

View Items

Once we have our tab menu items, we are ready for the views. We need to match the views to ids from the menus. We also need to match the groups. For the views, instead of data-toggleid, we use data-toggleview. Just like the menu items, we need to have a default view that shows right away. This is indicated by the d-block class. The hidden views will have the d-none class.

<!-- menu items -->
<div class="toggle-menu">
    <div class="toggle-menu-item" data-togglegroup="primaryTabs" data-toggleid="hello"><label>Hello World</label></div>
    <div class="toggle-menu-item toggle-menu-item-deactive" data-togglegroup="primaryTabs" data-toggleid="blah"><label>Blah</label></div>
    <div class="toggle-menu-item toggle-menu-item-deactive" data-togglegroup="primaryTabs" data-toggleid="foo"><label>Foo Bar</label></div>
</div>
<!-- views -->
<div class="d-block" data-togglegroup="primaryTabs" data-toggleview="hello">
    <h1>Hello World</h1>
</div>
<div class="d-none" data-togglegroup="primaryTabs" data-toggleview="blah">
    <h1>Blah</h1>
</div>
<div class="d-none" data-togglegroup="primaryTabs" data-toggleview="foo">
    <h1>Foo Bar</h1>
</div>

Complete View

That's it! The view is ready for use. If you don't want to read about the CSS/Javascript, you can find all the code here on .

Expression Gif
Added from Giphy.

CSS

The CSS is fairly simple and the majority of it is just from the styling of the menu items, which you can easily change.

.toggle-menu{
    display: flex;
}

.toggle-menu-item{
    padding: 5px 10px;
    border-left: 1px #eee solid;
    border-right: 1px #eee solid;
    border-top: 1px #eee solid;
    display: inline-block;
    cursor: pointer;
}

.toggle-menu-item-deactive{
    background-color: ghostwhite;
}

.toggle-menu-item label{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 80%;
    color:#222;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.d-block{
    display: block;
}

.d-none{
    display: none;
}

Javascript

This uses jQuery (cdn) because sometimes it is quicker to not re-invent the wheel for small projects. Once our document is ready, we set up the menu item click handler, then we do the following steps:

if (window.jQuery) {

    // on page load
    jQuery(document).ready(function() {
    
        // on menu click
        jQuery(".toggle-menu-item").click(function(event) {
        
            // helpers
            let togglegroup = jQuery(this).data("togglegroup");
            let toggleid = jQuery(this).data("toggleid");
            
            // deactivate all menu items
            jQuery('[data-togglegroup]').each(function() {
                let other_togglegroup = jQuery( this ).data("togglegroup");
                if(other_togglegroup.toString() === togglegroup.toString() && jQuery(this).data("toggleid") !== undefined){
                    jQuery( this ).addClass('toggle-menu-item-deactive');
                }
            
            });
        
            // activate clicked menu item
            jQuery( this ).removeClass('toggle-menu-item-deactive');
        
            // for each view
            jQuery('[data-toggleview]').each(function() {
            
                // helpers
                let toggleview = jQuery( this ).data("toggleview");
                let other_togglegroup = jQuery( this ).data("togglegroup");
                
                // if it belongs to the same group
                if(other_togglegroup.toString() === togglegroup.toString()){
                
                    // if view equals clicked id, then show, else hide
                    if(toggleview.toString() === toggleid.toString()){
                        jQuery( this ).addClass('d-block').removeClass('d-none');
                    }else {
                        jQuery( this ).addClass('d-none').removeClass('d-block');
                    }
                }
            
            });
        });
    });

}else{
    console.error("Oh no! You need jQuery for this lib to work.")
}

Summary

That's it! This is a very simple library helper, hopefully you can find use for it or even better, learn from it! Maybe now you will be inspired to use and create your data attributes. You can find all the code here on . Until next time...

Expression Gif
Added from Giphy.