CODEWITHSUNDEEP
csstwitter-bootstrap
johnW
johnW

Reputation: 329

Why is tab1 content is appearing in the other tabs?

I'm using bootstrap tabs. The issue is that the tab1 content is always appearing when the other tabs content is also appearing. Do you know where is the issue? Do you know why the tab1 content is always appearing in the other tabs content instead of just appears the correct tab content?

Example: https://jsfiddle.net/2xahspct/

HTML:

<ul class="nav nav-pills" role="tablist">
  <li class="">
    <a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab1</span>
    </a>
  </li>
  <li class="disabled">
    <a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab2</span>
    </a>
  </li>
  <li class="disabled">
    <a class="nav-link" href="#tab3" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab3</span>
    </a>
  </li>
</ul>

<!-- tabs -->
<div class="tab-content bg-white" id="myTabContent">
  <div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
       aria-labelledby="home-tab">
    tab1
  </div>
</div>

<div class="tab-pane clearfix fade" id="tab2" role="tabpanel"
     aria-labelledby="contact-tab">
  tab2

  <div class="d-flex mb-3">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active border" href="#tab2-1" data-toggle="tab"
           role="tab">tab2-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link border" href="#tab2-2" data-toggle="tab"
           role="tab">tab2-2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link border" href="#tab2-3" data-toggle="tab"
           role="tab">tab-2-3</a>
      </li>
    </ul>
  </div>

  <div class="tab-content bg-white" id="myTabContent">
    <div class="tab-pane fade active show clearfix" id="tab2-1" role="tabpanel"
         aria-labelledby="home-tab">

      tab2-1
    </div>

    <div class="tab-pane fade show clearfix" id="tab2-2" role="tabpanel"
         aria-labelledby="home-tab">
      tab 2-2
    </div>

    <div class="tab-pane fade show clearfix" id="tab2-3" role="tabpanel"
         aria-labelledby="home-tab">
      tab2-3
    </div>
  </div>
</div>


<div class="tab-pane clearfix fade" id="tab3" role="tabpanel"
     aria-labelledby="contact-tab">
  tab 3
  <div class="d-flex mb-3">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active border" id="tab3-1" href="#tab3-1"
           data-toggle="tab"
           role="tab">tab 3-1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link border" id="tab3-2" href="#tab3-2"
           data-toggle="tab" role="tab">tab 3-2</a>
      </li>
    </ul>
  </div>
  <div class="tab-content bg-white" id="myTabContent">
    <div class="tab-pane fade show active clearfix" id="tab3-1" role="tabpanel"
         aria-labelledby="home-tab">
      tab3-1
    </div>

    <div class="tab-pane fade show clearfix" id="tab3-2" role="tabpanel"
         aria-labelledby="home-tab">
      tab3-2
    </div>
  </div>
</div>

Upvotes: 0

Views: 691

Answers (1)

Robert
Robert

Reputation: 6967

Review your code. You're prematurely closing your tab-content wrapper after the following code:

<div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel" aria-labelledby="home-tab">
  tab1
</div>

Which is causing an error where this tab, which is already set to active can never be set not to show when the other tabs (which exist outside this tab-content) are clicked.

Upvotes: 1

Related Questions