How to show the content of a custom nav tab with JQuery?

Question

I have made custom tabs with a function in JQuery. This is my custom tabs:

<div class="row">
    <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active">
        <p>Item 1</p>
    </div>
    <div class="col-4 master-advanced-left-tab">
        <p>Item 2</p>
    </div>
    <div class="col-4 master-advanced-left-tab">
        <p>Item 3</p>
    </div>
</div>

<div class="item1">
    Show content from item 1
</div>
<div class="item2">
    Show content from item 2
</div>
<div class="item3">
    Show content from item 3
</div>

This is the custom styling I made with the tabs:

.master-advanced-left-tab {
    overflow: hidden;
    cursor: pointer;
    padding-bottom: 10px;
    padding-top: 10px;
}

.master-advanced-left-tab > p {
    text-overflow: ellipsis;
    height: 20px;
}

.master-advanced-left-tab-active {
    color: #1C72DF;
    border-bottom: 3px #1C72DF solid;
}

And this is my function to activate the tabs (working)

$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
elem.addClass('master-advanced-left-tab-active');
switch (elem.data('id')) {
    case 'item1':
        //show div for item1
        break;
    case 'item2':
        //show div for item2
        break;
    default:
}

When I switch from tab I want to show the content from the class. I have tried with the toggle() function from JQuery. Also I have checked this stackoverflow post:

Bootstrap tab activation with JQuery

This is what I want but it didn't work for my solution because I don't use the nav tabs of bootstrap.

How can I show the content from each nav tab?

score 1 · Answer 1 · answered Aug 19 '19 at 07:56

To show content you can simply call show() on it. You can also make your logic more DRY and extensible by converting the clickable div elements to a and using the href attribute to target the content to be displayed. This saves you having to write endless if conditions or switch cases, as it will work for an infinite number of tabs. It also means that, if required, you can open tabs when the page loads via the fragment of the URL. Try this:

let $tabs = $('.tab-content');
let $triggers = $('.master-advanced-left-tab').on('click', function(e) {
  e.preventDefault();
  $triggers.removeClass('master-advanced-left-tab-active'); 
  var $elem = $(this).addClass('master-advanced-left-tab-active');
  
  $tabs.hide();
  $tabs.filter($elem.attr('href')).show();  
});

$triggers.first().trigger('click');

.master-advanced-left-tab {
  display: block;
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 10px;
  padding-top: 10px;
}

.master-advanced-left-tab>p {
  text-overflow: ellipsis;
  height: 20px;
}

.master-advanced-left-tab-active {
  color: #1C72DF;
  border-bottom: 3px #1C72DF solid;
}

.tab-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <a href="#item1" class="col-4 master-advanced-left-tab">
    <p>Item 1</p>
  </a>
  <a href="#item2" class="col-4 master-advanced-left-tab">
    <p>Item 2</p>
  </a>
  <a href="#item3" class="col-4 master-advanced-left-tab">
    <p>Item 3</p>
  </a>
</div>
<div class="tab-content" id="item1">
  Show content from item 1
</div>
<div class="tab-content" id="item2">
  Show content from item 2
</div>
<div class="tab-content" id="item3">
  Show content from item 3
</div>

Thanks for your time! Can I use this solution without the `a` tag? — Fearcoder, Aug 19 '19 at 08:40
Alright gonna implement several solutions and see whats best thank you so much for your time! — Fearcoder, Aug 19 '19 at 09:43

score 0 · Accepted Answer · answered Aug 19 '19 at 07:57

hide and show the method can be used for this purpose, Hope this helps

$('.master-advanced-left-tab').click(function(e){
 
    $(this).addClass('master-advanced-left-tab-active').siblings().removeClass('master-advanced-left-tab-active')

   var class1 = $(this).attr('data-id')
    $('.'+class1+'').removeClass('hide').siblings().addClass('hide')

})

.master-advanced-left-tab {
            overflow: hidden;
            cursor: pointer;
            padding-bottom: 10px;
            padding-top: 10px;
        }

            .master-advanced-left-tab > p {
                text-overflow: ellipsis;
                height: 20px;
            }

        .master-advanced-left-tab-active {
            color: #1C72DF;
            border-bottom: 3px #1C72DF solid;
        }
        .hide
        {
        display:none;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
    <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
        <p>Item 1</p>
    </div>
    <div class="col-4 master-advanced-left-tab" data-id="item2">
        <p>Item 2</p>
    </div>
    <div class="col-4 master-advanced-left-tab" data-id="item3">
        <p>Item 3</p>
    </div>
</div>
<div class="wrap">
<div class="item1  ">
    Show content from item 1
</div>
<div class="item2 hide">
    Show content from item 2
</div>
<div class="item3 hide">
    Show content from item 3
</div>
</div>

score 0 · Answer 3 · answered Aug 19 '19 at 07:57

You can see my code:

<div class="row">
  <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1">
    <p>Item 1</p>
  </div>
  <div class="col-4 master-advanced-left-tab" data-id="item2">
    <p>Item 2</p>
  </div>
  <div class="col-4 master-advanced-left-tab" data-id="item3">
    <p>Item 3</p>
  </div>
</div>

<div class="content-item item1 active">
    Show content from item 1
</div>
<div class="content-item item2">
    Show content from item 2
</div>
<div class="content-item item3">
    Show content from item 3
</div>

Css: add more some line:

.content-item  {  
   display: none
}
.content-item.active  {
   display: block
}

Then JS:

$('.master-advanced-left-tab').click(function (){
  let elem = $(this);
  $('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
  $('.content-item').removeClass('active');
  elem.addClass('master-advanced-left-tab-active');
  switch (elem.data('id')) {
      case 'item1':
        $('.item1').addClass('active')
        break;
      case 'item2':
        $('.item2').addClass('active')
        break;
      default:
        $('.item3').addClass('active')
  }
})

This is a demo: https://codepen.io/phuongnm153/pen/vYBXBGM

score 0 · Answer 4 · edited Aug 19 '19 at 08:28

Instead of swith you can use something more responsive like this:

function changeTab(element) {
  // remove 'active' class from item and tab to prevent multiple
  // tab selection
  $('.master-advanced-left-tab').removeClass('active');
  $('.tab').removeClass('active');
  
  // add class 'active' to clicked item and proper tab
  // tab class is taken from 'data-tab' property from item in html
  $(element).addClass('active');
  $('.tab.' + $(element).data('tab')).addClass('active');
}

// change tab to first at init to prevent none tab selected
// You can replace this by adding class 'active' to
// 'master-advanced-left-tab' and 'tab' item in html
changeTab( $('.master-advanced-left-tab:first-child') );

// not much to explain
$('.master-advanced-left-tab').on('click', function(){
  changeTab(this);
})

.master-advanced-left-tab {
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 10px;
  padding-top: 10px;
}

.master-advanced-left-tab > p {
  text-overflow: ellipsis;
  height: 20px;
}

/* changed from .master-advanced-left-tab-active to shorten code */
.master-advanced-left-tab.active {
  color: #1C72DF;
  border-bottom: 3px #1C72DF solid;
}

.tab {
  height: 0;
  overflow:hidden;
}

.tab.active {
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <!--  property 'data-tab' for js function to select proper tab  -->
  <div data-tab="item1" class="col-4 master-advanced-left-tab">
    <p>Item 1</p>
  </div>
  <div data-tab="item2" class="col-4 master-advanced-left-tab">
    <p>Item 2</p>
  </div>
  <div data-tab="item3" class="col-4 master-advanced-left-tab">
    <p>Item 3</p>
  </div>
</div>

<div class="tab item1">
  Show content from item 1
</div>
<div class="tab item2">
  Show content from item 2
</div>
<div class="tab item3">
  Show content from item 3
</div>

Sandeep Sherpur · Answer 5 · 2023-07-04T10:57:01.343

Check my this custom tab view

 
$('.nav.nav-tabs li').click(function() { 
        $('.nav.nav-tabs li').removeClass('active');
        $(this).addClass('active');
        $(this).parent('.nav.nav-tabs').next('.tab-content').find('.tab-pane').removeClass('active');
        $($(this).find('a').attr('data-href')).addClass('active');
    });

.nav.nav-tabs{
    display: inline;
}
.nav-tabs > li {
  float: left;
  list-style: none;
}

.nav-tabs > li > a {
  margin-right: 1rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  line-height: 1.5rem;
  border-bottom: 2px solid transparent;
  color: rgba(0, 0, 0, .87);
  display: inline-block;
  text-decoration: none;
  cursor:pointer;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:hover {
  color: rgba(0, 0, 0, .87);
  border-bottom-color: rgba(0, 0, 0, .87);
  cursor: default;
}

.tab-content {
  width:100%;
  display:block;
  
}
.tab-content .tab-pane {
  display: none;
  padding: 1rem 0;
}
.tab-content > .tab-pane.active {
  display: block;
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs list-unstyled xs-my3">
                                <li class="active"><a data-href="#location-stats" data-toggle="tab">Stats</a></li>
                                <li class=""><a data-href="#location-nearby" data-toggle="tab">Nearby</a></li>
                                <li class=""><a data-href="#location-travel" data-toggle="tab">Commute</a></li>
                                <li class=""><a data-href="#location-schools" data-toggle="tab" class="xs-mr0">Schools</a>                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane xs-relative active" id="location-stats">
                <p>Stats</p>
                                </div>
                <div class="tab-pane xs-relative " id="location-nearby">
                <p>Nearby</p>
                                </div>
                <div class="tab-pane xs-relative " id="location-travel">
                <p>Commute</p>
                                </div>
                <div class="tab-pane xs-relative " id="location-schools">
                <p>Schools</p>
                                </div>
               </div>
               
  </body>
  </html>

How to show the content of a custom nav tab with JQuery?

5 Answers5