CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Fearcoder
Fearcoder

Reputation: 788

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

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?

Upvotes: 2

Views: 1599

Answers (5)

Sandeep Sherpur
Sandeep Sherpur

Reputation: 2802

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>

Upvotes: 0

ciekals11
ciekals11

Reputation: 2155

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>

Upvotes: 0

Ryan Nghiem
Ryan Nghiem

Reputation: 2458

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

Upvotes: 0

Deepak A
Deepak A

Reputation: 1636

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337656

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>

Upvotes: 1

Related Questions