Hybrid of the Bootstrap tabs with the dropdown button

Question

Using bootstrap I'm trying to do a combination of bootstrap tabs and a dropdown button. Basically what I'm trying to accomplish is I have a blank page with a dropdown button. The button says "Please select one" and when the button is clicked a dropdown menu shows. When you click on one of the options the content for that option displays below. Then when you click on another option that content shows.

The way I have it set up right now works, however whenever you click an option, it adds an "active" class and when you click another option that also because "active" without removing it from the other one. So basically all of them will end up with active classes attached which no longer make them selectable after clicked once.

Here is what I have:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="btn-group">
  <button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Selct One</button>
    <ul class="dropdown-menu" role="tablist">
      <li role="presentation"><a href="#choice1" aria-controls="profile" role="tab" data-toggle="tab">Choice 1</a></li>
      <li role="presentation"><a href="#choice2" aria-controls="messages" role="tab" data-toggle="tab">Choice 2</a></li>
    </ul>
</div>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane" id="choice1">
    Content for Choice 1
  </div>
  <div role="tabpanel" class="tab-pane" id="choice2">
    Content for Choice 2 
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

I think it might have to do with the fact that none of the options had a "active" class assigned to it first?

Answer 1

Try to remove the .active class by the script:

https://jsfiddle.net/glebkema/cj1a8Lno/

$('#hybrid a').click(function() {
  $('#hybrid .active').removeClass('active');
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div id="hybrid" class="btn-group">
  <button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Selct One <span class="caret"></span></button>
    <ul class="dropdown-menu" role="tablist">
      <li role="presentation"><a href="#choice1" aria-controls="profile" role="tab" data-toggle="tab">Choice 1</a></li>
      <li role="presentation"><a href="#choice2" aria-controls="messages" role="tab" data-toggle="tab">Choice 2</a></li>
    </ul>
</div>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane" id="choice1">
    Content for Choice 1
  </div>
  <div role="tabpanel" class="tab-pane" id="choice2">
    Content for Choice 2 
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>