I have installed a Bootstrap collapse on click of a table row. Now if you notice, collapse can be opened by clicking anywhere on the row, and that's fine, that's how I want it to be.

But I want one exception if you notice there's a desktop screen on the last column of the table row. If I click on it, I don't want the row to open Bootstrap collapse.

Is there any way how I can achieve this?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>


<table class="table">
  <thead class="table-header">
    <tr>
      <th scope="col"></th>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
      <th scope="col">Last Login</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
      <td><a href="javascript:void(1);" class="right-angle option-tab"><i class="fas fa-angle-right"></i></a></td>
      <td>[0708]</td>
      <td>Mark Jonas</td>
      <td>Guest</td>
      <td class="success">Active</td>
      <td>22/11/2018</td>
      <td><a href="http://google.com" target="_blank" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
    </tr>

    <!-- Table Row 1 Collapse -->
    <tr>
      <td class="insert-here coll-bg" colspan="8">
        <!-- START OF COMPLETE ACCOUNT SETTINGS -->
        <div class="collapse" id="AccountDetails">
          <p>Hello World</p>
        </div>

1 Answers

1
Mamun On Best Solutions

You can try Event​.stop​Propagation() on the last td to prevent further propagation of the current event in the capturing and bubbling phases.

$('tr td:last-child').click(function (e) {
  e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>


<table class="table">
  <thead class="table-header">
    <tr>
      <th scope="col"></th>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Type</th>
      <th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
      <th scope="col">Last Login</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
      <td><a href="javascript:void(1);" class="right-angle option-tab"><i class="fas fa-angle-right"></i></a></td>
      <td>[0708]</td>
      <td>Mark Jonas</td>
      <td>Guest</td>
      <td class="success">Active</td>
      <td>22/11/2018</td>
      <td><a href="http://google.com" target="_blank" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
    </tr>

    <!-- Table Row 1 Collapse -->
    <tr>
      <td class="insert-here coll-bg" colspan="8">
        <!-- START OF COMPLETE ACCOUNT SETTINGS -->
        <div class="collapse" id="AccountDetails">
          <p>Hello World</p>
        </div>