Simple Tab content area with HTML, CSS and jQuery

Tab content area occupies less space and can handle a lot of information on the web page. It displays multiple sections in a neat way.

It is used to display related information e.g. displaying different types of settings forms.

This makes it easier for the user to quickly switch from one section to the other.

In this tutorial, I show how you can create a simple Tab layout with HTML, CSS, and jQuery.

Contents

1. HTML
2. CSS
3. jQuery
4. Demo
5. Conclusion

1. HTML

With the unordered list show tabs and the content section with <div>.

Tab Links

Tab Content

Completed Code

<div class="tabs">
  <ul class="tabs-list">
     <li class="active"><a href="#tab1">Tab1</a></li>
     <li ><a href="#tab2">Tab2</a></li>
     <li ><a href="#tab3">Tab3</a></li>
  </ul>

  <div id="tab1" class="tab active">
     <h3>Tab1</h3>
     <p>
       Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary
     </p>
  </div>
  <div id="tab2" class="tab">
    <h3>Tab2</h3>
    <p>
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my
    </p>
  </div>
  <div id="tab3" class="tab">
    <h3>Tab3</h3>
    <p>
      The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens
    </p>
  </div>

</div>

2. CSS

.tabs{
    width:60%;
    height:auto;
    margin:0 auto;
}

/* tab list item */
.tabs .tabs-list{
    list-style:none;
    margin:0px;
    padding:0px;
}
.tabs .tabs-list li{
    width:100px;
    float:left;
    margin:0px;
    margin-right:2px;
    padding:10px 5px;
    text-align: center;
    background-color:cornflowerblue;
    border-radius:3px;
}
.tabs .tabs-list li:hover{
    cursor:pointer;
}
.tabs .tabs-list li a{
    text-decoration: none;
    color:white;
}

/* Tab content section */
.tabs .tab{
    display:none;
    width:96%;
    min-height:250px;
    height:auto;
    border-radius:3px;
    padding:20px 15px;
    background-color:lavender;
    color:darkslategray;
    clear:both;
}
.tabs .tab h3{
    border-bottom:3px solid cornflowerblue;
    letter-spacing:1px;
    font-weight:normal;
    padding:5px;
}
.tabs .tab p{
    line-height:20px;
    letter-spacing: 1px;
}

/* When active state */
.active{
    display:block !important;
}
.tabs .tabs-list li.active{
    background-color:lavender !important;
    color:black !important;
}
.active a{
    color:black !important;
}

/* media query */
@media screen and (max-width:360px){
    .tabs{
        margin:0;
        width:96%;
    }
    .tabs .tabs-list li{
        width:80px;
    }
}

3. jQuery

Disable default action when the Tab header list anchor gets clicked.

Completed Code

<script type="text/javascript">
$(document).ready(function(){

  $(".tabs-list li a").click(function(e){
     e.preventDefault();
  });

  $(".tabs-list li").click(function(){
     var tabid = $(this).find("a").attr("href");
     $(".tabs-list li,.tabs div.tab").removeClass("active");   // removing active class from tab

     $(".tab").hide();   // hiding open tab
     $(tabid).show();    // show tab
     $(this).addClass("active"); //  adding active class to clicked tab

  });

});
</script>

4. Demo

View Demo

5. Conclusion

You can show as many tab lists as you want to show on your web page. For this create the new list item and create <div > container for it.