CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
josefdev
josefdev

Reputation: 763

Two active tabs at the same time! How do I do?

The website I am working on has two panels side by side with tabs. It needs to have two panels active at the same time. If I switch panels on the right side, the panel on the left side should still display its content. Now, only one tab is active after I have chosen to switch tab on any of the panels.

I did begin to use Bootstrap, but it was decided that it should be removed from the project. I have then written new SCSS, modified the HTML and created a new javascript file.

Here are some code snippets: First the Javascript file, which handles the logic. Then you can see the code for the left bar, and the content on the panels, and so on. 

$(document).ready(function() { /*Javascript for the left bar */
  $('ul.nav li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.nav li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  });

  $('ul.cor.li').click(function() { /*Javascript for the right bar */
    var tab_id = $(this).attr('data-tab');

    $('ul.cor.li').removeClass('active');
    $('.tab-content').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
  });
});
ul.nav li {
  list-style-type: none;
  display: inline;
  overflow: hidden;
  padding: 3px 15px;
  cursor: pointer;
}

.tab-content {
  display: none;
  background: white;
  padding: 15px;
}

.tab-content.current {
  display: inherit;
}

.navbar-light {
  border-left-color: black;
}

.nav,
.tabs {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- left side bar -->

<div class="flex-container">
  <div class="overview-flexbox-mid">
    <div id="leftPanel">
      <ul class="nav nav-tabs navbar-light bg-light" id="leftTabs">
        <li class="nav-item nav-link current" data-tab="tab-1"><i class="fa fa-compress" aria-hidden="true"></i> Subject1
        </li>
        <li class="nav-item nav-link" data-tab="tab-2"><i class="fa fa-book" aria-hidden="true"></i> Subject2
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="tab-1" class="tab-content current">
  <div class="flex-container-horizontal" id="leftPanelContent1">
    <h1>Some text</h1>
  </div>
</div>

<!-- left side content -->
<div id="tab-2" class="tab-content">
  <h1>More text</h1>
</div>


<!-- right side bar -->

<div class="overview-flexbox-mid">
  <div id="rightPanel">

    <ul class="cor nav nav-tabs navbar-light bg-light" id="rightTabs">
      <li class="nav-item nav-link active" data-tab="tab-5"><i class="fa fa-bar-chart" aria-hidden="true"></i> Subject3
      </li>
      <li class="nav-item nav-link" data-tab="tab-6"><i class="fa fa-signal" aria-hidden="true"></i> Subject4
      </li>
    </ul>
  </div>
</div>

<!--right side content-->

<div id="tab-5" class="tab-content active">
  <div class="flex-container-horizontal">
    <h1>Content</h1>
  </div>
</div>
<div id="tab-6" class="tab-content">
  <h1>Content 2</h1>
</div>

Upvotes: 2

Views: 2561

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

wrap the left and right tab bars in a div with a class of wrap, select to remove the current class based on that class

<div class="wrap">
......
      <div id="leftPanel"></div>
......
</div>

<div class="wrap">
......
      <div id="rightPanel"></div>
......
</div>

js:

$('.nav li').click(function() {
  var tab_id = $(this).attr('data-tab');

  $(this).closest('.wrap').find('ul.nav li,.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#" + tab_id).addClass('current');
})

demo

Upvotes: 1

Colin Cline
Colin Cline

Reputation: 1279

You trying to remove active class from an activated tab content but while both tab content has same class name, both will lose their active class. modify like this:

$(document).ready(function () {
    $('ul.nav li').click(function () {
        var tab_id = $(this).attr('data-tab');

        $(this).removeClass('current');
        $(this).find('.tab-content').removeClass('current');// modify this

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    });

    $('ul.cor.li').click(function () {
        var tab_id = $(this).attr('data-tab');

        $(this).removeClass('active');
        $(this).find('.tab-content').removeClass('active');

        $(this).addClass('active');
        $("#" + tab_id).addClass('active');
    });
});

Upvotes: 1

Related Questions