MindSpyder February 2016

Multiple data-toggle not working correctly - Bootstrap 4

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</        

Answers


MindSpyder February 2016

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.

Post Status

Asked in February 2016
Viewed 2,243 times
Voted 10
Answered 1 times

Search




Leave an answer