Bootstrap: allow opening a modal without activating collapse on parent

Simple situation here: I have a Bootstrap 4 table with rows that I want to be clickable to expand additional, hidden rows. So the entire tr has data-toggle=”collapse”. However, inside that TR are some buttons that I want to open modals without activating the collapse. I can’t seem the get that working, I’ve tried:

      $('tr[data-toggle="collapse"]').click( function(e) {
        if (e.target.tagName != "TD") { 
          e.target.click();
          e.stopPropagation();
        }
      });

But this just prevents modals from showing up. I have also tried to capture clicks on the buttons, check the targets and only call .modal(‘show’) if the targets are buttons, stopping propagation otherwise, but this causes the modals to show and then close immediately.

Answer

Don’t rely on the attributes data-bs-something but rather write your own logic for opening the modal. Then cancel the event on click using ev.stopPropagation()

$(".open-modal").on("click", function(ev) {
  $('#exampleModal').modal()

  // this line does it
  ev.stopPropagation();

})

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <h3 class="mb-0">
        Collapsible Group Item #1


        <button class="open-modal">open modal</button>
      </h3>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird

      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Advertisement

Answer