Button with link inside Bootstrap accordion table

Question

I have a Bootstrap accordion table that works great. Basically, it shows more content if someone clicks on a line. Now the problem is that one of the lines contains a link to the button, and when someone clicks on this button, it goes to that link correctly, but also opens the contents of the hidden line.

How to make sure that when someone clicks on the button, he also does not open the hidden line and only follows the link?

<table class="table">

<thead>

<th width="20%" class="">Row 1</th>
<th width="20%" class="">Row 2</th>
<th width="20%" class="">Row 3</th>
<th width="20%" class="">Row 4</th>
<th width="20%" class="">Row 5</th>

</thead>

<tbody>

<tr data-toggle="collapse" data-target="#123" class="accordion-toggle">

<td class="">Content 1</td>
<td class="">Content 2</td>
<td class="">Content 3</td>
<td class="">Content 4</td>
<td class=""><a href="http://www.url.com/" type="button" class="btn btn-primary">Link</a></td>
</tr><tr>
<td colspan="5" class="hiddenRow"><div class="accordian-body collapse" id="123">More Content</div> </td>
</tr>

</tbody>

</table>

Answer 1

Try something like this: -

<a href="http://www.url.com/" onclick= stopEventPropogation(event) type="button" class="btn btn-primary">Link</a>

<script type="text/javascript">
function stopEventPropogation(e){
e.stopPropogation()
}
</script>

OR, as suggested by Bart, this can also be used: -

$('.accordion-toggole').on('click', '.btn', function(e) { e.stopPropagation(); })