CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Divyank
Divyank

Reputation: 788

Multiple pills for bootstrap tabs

i am having one bootstrap tab on my html page. I want to set multiple pills for tab, when i change tab it should change multiple pills

here is my html

<div class="countries">
     <a href="#first" role="tab" data-toggle="tab">country</a>
</div>

<ul class="nav nav-tabs" role="tablist">
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="first">
            <div class="col-sm-12 col-xs-12 detailTable">
                {{--contents 1 --}}
            </div>
        </div>
    </div>
</ul>

<ul class="nav nav-tabs" role="tablist">
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="first">
            <div class="col-sm-12 col-xs-12 detailTable">
                {{--contents 2 --}}
            </div>
        </div>
    </div>
</ul>


<script>
    $(".countries a").click(function () {

        $(this).tab('show');
    });
</script>

Upvotes: 0

Views: 1095

Answers (1)

max
max

Reputation: 8687

Here is what you can do:

  1. Create links to tabs and hide them in CSS.
  2. Open two tabs using this hidden links clicking on your link.


HTML:

<div class="countries">
  <a href="#">country</a>
</div>
<a href="#first" role="tab" data-toggle="tab">country</a>
<a href="#second" role="tab" data-toggle="tab">country</a>
<ul class="nav nav-tabs" role="tablist">
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="first">
      <div class="col-sm-12 col-xs-12 detailTable">
        {{--contents 1 --}}
      </div>
    </div>
  </div>
</ul>

<ul class="nav nav-tabs" role="tablist">
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="second">
      <div class="col-sm-12 col-xs-12 detailTable">
        {{--contents 2 --}}
      </div>
    </div>
  </div>
</ul>

JS:

$(".countries a").click(function(e) {
  e.preventDefault();
  $("[href='#first']").tab('show');
  $("[href='#second']").tab('show');
});

Remember, you can't have two divs with the same ID on one page (this is invalid HTML).

CODEPEN

Upvotes: 2

Related Questions