CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user9659025
user9659025

Reputation:

Why when tab2 is clicked it appears always the content of the tab1?

I have some tabs using bootstrap 4. In the tab with id "mytabs" I have other two tabs inside it. And in this tabs inside "#mytabs" that is an issue. If I click in the "tab1" link it appears the content of the tab1 but if I click in the "tab2" link it still appears the content of the "tab1".

Do you know where is the issue?

Fiddle with issue: https://jsfiddle.net/cv25swga/8/

HTML:

<body>
  <div class="bg-light-gray2">
    <div class="container nopadding py-4">
      <div class="row mt-3">
        <div class="col-12">
          <ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">

            <!-- other tab links --> 

            <li class="disabled">
              <a class="nav-link" href="#mytabs" data-toggle="tab" role="tab">
                <i class="fa fa-lock" aria-hidden="true"></i> 
                <span class="d-none d-lg-inline-block">Access Data</span>
              </a>
            </li>

          </ul>


          <div class="tab-content registration_body bg-white" id="myTabContent">

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

              <div class="d-flex mb-3">
                <ul class="nav nav-pills">
                  <li class="nav-item">
                    <a class="nav-link active border" id="tab1" href="#tab1"
                       data-toggle="tab"
                       role="tab">tab1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link border" id="tab2" href="#tab2"
                       data-toggle="tab" role="tab">tab2</a>
                  </li>
                </ul>
              </div>
              <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 class="tab-pane fade show clearfix" id="tab2" role="tabpanel"
                     aria-labelledby="home-tab">

                  tab2

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Views: 145

Answers (1)

Nicolas Guilbeault-Desjardins
Nicolas Guilbeault-Desjardins

Reputation: 106

This is caused by the fact both your tabs and the links have the same ID.

Change your IDs up so that they are unique on the page and the problem will disappear.

Upvotes: 1

Related Questions