CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4tabs
tropcool
tropcool

Reputation: 141

Bootstrap: How to display 2 tab-contents by clicking on a single tab?

I have a page with 2 tabs.

I want the pills-public tab to display :

I want the pills-private tab to display :

Note that the 2 PRIVATE content are not in the same region.

How to do this ? The code below does not work...

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVATE</a>
  </li>
</ul>
<div class="region-top">
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 2</div>
  </div>
</div>
<div class="region-bottom">
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade" id="pills-public" role="tabpanel" aria-labelledby="pills-public-tab">PUBLIC BLOCK 1</div>
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">PRIVATE BLOCK 1</div>
  </div>
</div>

Upvotes: 2

Views: 2983

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

You can't have multiple HTML elements with similar IDs... if you do, only the first one will be picked - we add our custom classes pillsPrivateClass and pillsPublicClass to get around this; class="tab-content" should be used in the code only once; with bootstrap 4 (out of the box) even after re-arranging the elements like i did, 2 tabs wouldn't get toggled with a single click.. so we'd have to use jQuery to toggle/un-toggle any additional divs...

$(document).ready(function() {
  $(".nav-link").click(function() {
    if ($(this)[0].id == 'pills-private-tab') {
      $(".pillsPrivateClass").each(function() {
        if ($(this).hasClass('active')) { /* */ } else {
          $(this).addClass('active');
          $(this).addClass('show');
        }
      });
      $(".pillsPublicClass").each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).removeClass('show');
        }
      });
    } else {
      $(".pillsPrivateClass").each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).removeClass('show');
        }
      });
    }
  });
})
.pillsPrivateClass:not(.active) {
  display: none
}

.pillsPublicClass:not(.active) {
  display: none
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link " id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="false">PRIVATE</a>
  </li>
</ul>
<div class="tab-content">
  <div class='region-top'>
    <div id="pills-private" class=" tab-pane  pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PRIVATE BLOCK 2
    </div>
  </div>
  <div class='region-bottom'>
    <div id="pills-public" class=" tab-pane  pillsPublicClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PUBLIC BLOCK 1
      <br/>
    </div>
    <div id="pills-private" class=" tab-pane  pillsPrivateClass" role="tabpanel" aria-labelledby="pills-private-tab">
      PRIVATE BLOCK 1
    </div>
  </div>
</div>

Upvotes: 2

Related Questions