jQuery Tutorial: Guide to build custom and simple Tab view

Tab view is one of the most common way to group and segregate the related and non related information respectively

Build custom and simple Tab View

Today we will see how to build custom and simple tab view. Tab view is one of the most common way to group and segregate the related and non related information respectively.

The places where you see this UI control commonly are browsers and Code Editors (IDEs). So as we all got its usability; let's build our custom one for our website.

I have grouped the guide in several steps:

First we will have a set of html elements that will become the backbone to our tab view.

<div class="tab-container">
  <ul>
    <li data-href="#html" class="active">HTML</li>
    <li data-href="#css">CSS</li>
    <li data-href="#javascript">Javascript</li>
    <li data-href="#jquery">jQuery</li>
  </ul>
  <div>
    <div class="tab-data active" id="html">
      <p>Some content....</p>
    </div>
    <div class="tab-data" id="css">
      <p>Some content....</p>
    </div>
    <div class="tab-data" id="javascript">
      <p>Some content....</p>
    </div>
    <div class="tab-data" id="jquery">
      <p>Some content....</p>
    </div>
  </div>
</div>

Here is the CSS we gonna use for styling of above code.

.tab-container{
  border-bottom: 1px solid #aaa;
}
.tab-container ul{
  list-style: none;
  border-bottom: 1px solid #aaa;
}
.tab-container ul li{
  display: inline-block;
  text-align: center;
  padding: 6px 8px;
  cursor: pointer;
  border: 1px solid #aaa;
  border-radius: 2px 2px 0 0;
  border-bottom: none;
  background-color: #eee;
}
.tab-container ul li.active{
  top: 1px;
  position: relative;
  color: #999;
  z-index: 2;
  background-color: #fff;
}

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

Now we will work on JavaScript code that will make the above pieces behave like a Tab View.

$(document).ready(() => {
  $('.tab-container li').on('click', (event) => {
    event.preventDefault();
    $parent = $(this).parent().parent();
    $parent.find('.tab-data').removeClass('active')
    $parent.find(
      $(this).siblings().removeClass('active').parent()
        .find(this).addClass('active').data('href')
    ).addClass('active');
  });
});

The above code works fine if the CSS only is changed. If the element structure needs to be changed; some parallel changes has to be made in the JavaScript.

This is the simplest code to make the Tab view.

Moreover; the container can be made to look more beautiful. To make this tab view of fixed height; i.e. the content area will of fixed height following CSS can be added to the above code.

.tab-data{
  /* Change the height value here */
  height: 450px;
  overflow-y: auto;
}

If you made something innovative and creative using the above code; share your experiences with us through comments.

And stay tuned for more creative tutorials on web design and development by subscribing to us.

Demo  Download