-2

I have the following page: http://mindspyder.com/newline/my-account.html

And the following code on that page:

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item"> <a class="btn btn-primary btn-sm" href="#" role="button"><i class="fa fa-search-plus"></i> View</a> </li>
  <li class="nav-item"> <span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span></li>
  <li class="nav-item"> <a class="btn btn-primary btn-sm" href="#download" role="tab" data-toggle="tab">Settings</a> </li>
</ul>

<!-- /Nav tabs --> 
<!-- Tab panes -->

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="review"></div>
  <div role="tabpanel" class="tab-pane" id="edit"></div>
  <div role="tabpanel" class="tab-pane" id="delete">hello</div>
  <div role="tabpanel" class="tab-pane" id="download">
    <p>
    <form>
      <p>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Invoice" id="CheckboxGroup1_0">
          Invoice</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Establishment Kit" id="CheckboxGroup1_1">
          Establishment Kit</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Declaration of Custody Trust" id="CheckboxGroup1_2">
          Declaration of Custody Trust</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Trustee Minutes" id="CheckboxGroup1_3">
          Trustee Minutes</label>
        <br>
        <label>
          <input type="checkbox" name="CheckboxGroup1" value="Compliance Letter" id="CheckboxGroup1_4">
          Compliance Letter</label>
        <br>
      </p>
    </form>
    </p>
    <p>
      <button type="button" class="btn btn-success btn-sm">Download Selected <i class="fa fa-arrow-down"></i></button>
    </p>
  </div>
</div>

<!-- /Tab panes -->

Now, if you go to the page and click the blue Delete button, everything works perfectly. Now if you click Cancel, and click on one of the other tabs, it still works as it should. The problem is you click Delete again, it doesn't switch back to the Delete tab when opening the modal, but leaves it on the previous tab.

What am I doing wrong?

danopz
  • 3,310
  • 5
  • 31
  • 42
MindSpyder
  • 45
  • 6
  • Create a minimal example on [Bootply](http://bootply.com) to narrow down the problem. Also keep in mind that Bootstrap 4 is in alpha. – Carol Skelly Feb 08 '16 at 23:51

1 Answers1

0

I figured it out, by changing the nesting, so:

<span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span>

becomes:

<a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><span data-toggle="modal" data-target="#myModal"><i class="fa fa-times"></i> Delete</span></a>

and now it works as it should.

MindSpyder
  • 45
  • 6