CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4
Samira Kumar
Samira Kumar

Reputation: 521

Bootstrap tab dropdown doesn't show after 1st click

In my sample code below, the dropdown tab contents does not show after it's viewed for first time. 

(function($) {
  $(function() {
    $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
      // Get the name of active tab
      var activeTab = $(e.target).text();

      // Get the name of previous tab
      var previousTab = $(e.relatedTarget).text();

      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
    });
  });

})(jQuery);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  <main class="main"></main>
  <hr>
  <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
  <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
  <hr>

  <ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

    <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li>

    <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
                Java
                <b class="caret"></b>
            </a>

      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
        <li>
          <a href="#d1" data-toggle="tab">D1</a>
        </li>

        <li>
          <a href="#d2" data-toggle="tab">D2</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">
      <p>This is the home page</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="account-details">
      <p>Pane 1</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="d1">
      <p>Dropdown 1</p>
    </div>


    <div role="tabpanel" class="tab-pane" id="d2">
      <p>Dropdown 2</p>
    </div>
  </div>
  </main>
  <!-- Page style-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

When the active tab becomes one of the dropdown values (D1/D2) and when you change the active tab to any other tab, the Previous Tab: value becomes empty.

Dropdown 1 is selected. enter image description here Now if I select dropdown 1 again, I don't see the content.

Any feedback is appreciated.

Thank you.

Upvotes: 0

Views: 46

Answers (1)

awran5
awran5

Reputation: 4536

You are mixing up between Bootstrap v3 and v4 which causing this conflict, just remove the v4 one, (Your code is compatible with v3)

(function($) {
  $(function() {
    $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
      // Get the name of active tab
      var activeTab = $(e.target).text();

      // Get the name of previous tab
      var previousTab = $(e.relatedTarget).text();

      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
    });
  });

})(jQuery);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Main -->
<main class="main">
  <hr>
  <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
  <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
  <hr />

  <ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

    <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li>
    <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java<b class="caret"></b></a>

      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
        <li>
          <a href="#d1" data-toggle="tab">D1</a>
        </li>
        <li>
          <a href="#d2" data-toggle="tab">D2</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">
      <p>This is the home page</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="account-details">
      <p>Pane 1</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="d1">
      <p>Dropdown 1</p>
    </div>

    <div role="tabpanel" class="tab-pane" id="d2">
      <p>Dropdown 2</p>
    </div>
  </div>
</main>
<!-- End main -->

Upvotes: 1

Related Questions