I have a Bootstrap accordion table that works perfectly. Basically, it shows more content if someone clicks a row. Now, the problem is that one of the rows contains a button link and when someone clicks that button, it goes to that link correctly, but it also opens the hidden row content.
How do I make it so that when someone clicks on the button, it doesn't open the hidden row as well and goes to the link only?
<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>
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(); })
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.