Bootstrap Dropdown with tab pane

Question

I created a dropdown successfully with the tab content change. But the problem is, after I select the value in the dropdown to change the tab content - Let's say from wan_static_ip to wan_dynamic_ip , I cannot switch back to wan_static_ip again.

Another problem is, when the value has been selected it will become permanently selected and cannot be clicked again

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="borders col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#wan_static_ip" data-toggle="tab">Static IP</a> </li> <li role="presentation"><a href="#wan_dynamic_ip" data-toggle="tab">Dynamic IP</a> </li> <li role="presentation"><a href="#wan_pppoe" data-toggle="tab">PPPoE</a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade in active" id="wan_static_ip">1</div> <div class="tab-pane fade" id="wan_dynamic_ip">2</div> <div class="tab-pane fade" id="wan_pppoe">3</div> </div> </div>

Answer 1

I had the same problem and found a solution. The reason for the problem is that the bootstrap selector inside the dropdown does not work well. To solve this problem, you have to change and use this jQuery code according to the name of the classes of your choice.

 jQuery(".dropdown-item").on("click", function() { jQuery(this).attr("aria-selected", "true"); jQuery(this).addClass("active"); jQuery(".dropdown-item").not(this).attr("aria-selected", "false"); jQuery(".dropdown-item").not(this).removeClass("active"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container"> <ul class="nav nav-tabs mb-3" id="standort" role="tablist"> <li class="nav-item dropdown" role="presentation"> <a id="dropName" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Select</a> <ul class="dropdown-menu"> <li class="nav-item drop-item"> <button class="dropdown-item nav-link active" id="tab-1" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="true"> Item 1 </button> </li> <li class="nav-item drop-item"> <button class="dropdown-item nav-link" id="tab-2" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false"> Item 2 </button> </li> </ul> </li> </ul> <div class="tab-content" id="content"> <div class="row tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tab-1"> <H1>This Is Content Of Item 1 </H1> </div> <div class="row tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tab-2"> <H1>This Is Content Of Item 2 </H1> </div> </div> </div>

Answer 2

A sample code of a tab dropdown button from getbootstrap.com

<ul class="nav nav-tabs">
    <li class="dropdown" role="presentation">
        <a aria-expanded="false" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle">
              Dropdown <span class="caret"></span>
        </a>
        <ul role="menu" class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>