How to Work With Tabs in jQuery

Shraddha Paghdar Feb 15, 2024

jQuery jQuery Tabs

In today’s post, we’ll learn about tabs in jQuery.

Tabs in jQuery

The Tabs is a single content area with multiple areas, each associated with a heading in a list. Tabs are typically used to divide content into multiple sections that can be swapped out like an accordion to save space.

Tabs have a selected set of markup that ought to be used for them to work properly:

The tabs themselves must be in an Ordered or Unordered list.
Each tab title must be inside a list element and be accompanied by an anchor with an href attribute to be wrapped.
Each tab panel can be any valid element but must have an ID that matches the hash in the associated tab’s anchor.

The content material of every tab panel can be defined on the web page or loaded through Ajax; both are automatically handled based on the href of the anchor associated with the tab. Using the default tabs are set off on click on.

However, events may be modified to hover over the events option. Let’s understand it with the following example.

Code - HTML:

<ul id="tabs">
  <li><a id="home">Home</a></li>
  <li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>

Code - CSS:

#tabs {

   width: 100%;
    height:30px;
   border-bottom: solid 1px #CCC;
   padding-right: 2px;
   margin-top: 30px;


}
a {cursor:pointer;}

#tabs li {
    float:left;
    list-style:none;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    margin-right:5px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
      outline:none;
}

#tabs li a {

    font-family:Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px;
    display:block;
    background: #FFF;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    text-decoration:none;
    outline:none;

}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

#tabs li a:hover, #tabs li a.inactive:hover {


    color: #5685bc;
      outline:none;
}

.container {

    clear:both;
    width:100%;
    border-left: solid 1px #CCC;
      border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
    text-align:left;
  padding-top: 20px;

}

.container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom: 10px; color: #5685bc; }

.container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }

.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.container li { padding-bottom: 5px; margin-left: 5px;}

Code - JavaScript:

$(document).ready(function() {
  $('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  $('#tabs li a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) {
      $('#tabs li a').addClass('inactive');
      $(this).removeClass('inactive');
      $('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });
});

In the above example, we have defined tabs with a ul tag which will list all the tabs. Contents of the tabs will be hidden by default using the hide method, and by default, the first tab will be visible.

Once the user clicks on any tabs, it will apply the .inactive class to all the list elements and remove the .inactive class from the selected list element. This will ensure that only the selected list element will be activated at any given time.

Try to run the above snippet in any browser that supports jQuery, and it will display the following result.

Output:

Working with Tabs in jQuery

Run Code

Author: Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.