I'm using jQuery to make HTML table rows expand on click. Clicking any other row will collapse previously opened rows (as desired).

**HTML**:

```
<table class="table table-hover">
    <tbody>
        <tr>
            <td>
                Click to expand
                <div class="details hidden" ><a href="#" class="collapse-row">Close</a></div>
            </td>
        </tr>
    </tbody>
</table>

```

**JavaScript**:

```
$('tr:not(a.collapse-row)').click(function(){
  console.log("Expand row");
  $('.details').addClass("hidden");
  $(this).find('.details').removeClass("hidden");
});    

$('.collapse-row').click(function(e){
  e.preventDefault();
  console.log("Collapse row");
  $('.details').addClass("hidden");
});

```

**Demo**: <http://www.bootply.com/KGu1lDO9PS>

However, I also need an additional link (or button) that collapses the row. Is there a way to resolve the conflicting click-events? I tried a `:not` selector (as seen in the demo) and also working with `z-index` — without success.