How to use link in bootstrap accordion toggle

Question

I have a table that sorts line items by invoice, and am using bootstrap collapse to show/hide by invoice. The whole invoice row acts as a toggle for the table.

/-----------------------------------------------------\
| #547 | 2017-10-10 | $65.00 | Invoice         | PAID |
|------|------------|--------|-----------------|------|
|      | 2017-10-10 | $35.00 | seeded for test |      |
|      | 2017-10-10 | $15.00 | seeded for test |      |
|      | 2017-10-10 | $15.00 | seeded for test |      |
|------|------------|--------|-----------------|------|
| #548 | 2017-10-13 | $46.00 | Invoice         | OPEN |
|------|------------|--------|-----------------|------|
|      | 2017-10-12 | $23.00 | Test form       |      |
|      | 2017-10-12 | $23.00 | Test form       |      |
\-----------------------------------------------------/

The problem comes when I try to make the id number link to a details page. It simply doesn't work. Hover works fine, and the element inspector confirms the link exisits, but click on it just opens/closes the line items.

<table class="table table-striped" id="accordion">
    <?php foreach($invoices as $invoice): ?>
        <thead class="accordion-table" data-toggle="collapse" data-parent="#accordion" href="#collapse<?=$invoice['id']?>" aria-expanded="true" aria-controls="collapse<?=$invoice['id']?>">
            <tr>
                <th><a href="/report/invoice/<?=$invoice['id']?>">#<?=$invoice['id']?></a></th>
                <th><?=date('Y-m-d',strtotime($invoice['created']))?></th>
                <th>$<?=number_format($invoice['amount'],2)?></th>
                <th><?=$invoice['description']?></th>
                <th><?=$invoice['invoiceStatus']?></th>
            </tr>
        </thead>
        <tbody id="collapse<?=$invoice['id']?>" class="collapse accordion-body" role="tabpanel" >
            <?php foreach($transactions[$invoice['id']] as $transaction): ?>
            <tr>
                <td></td>
                <td><?=date('Y-m-d',strtotime($transaction['created']))?></td>
                <td>$<?=number_format(abs($transaction['amount']),2)?></td>
                <td><?=$transaction['description']?></td>
                <td></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    <?php endforeach; ?>
</table>

The toggle is in the <thead> and the link is around the id in the first <th> .

Here is a JSFiddle that displays the current functionality.

Is there any way of getting the link to work without removing it from the row or making the row no longer toggle the collapse?

Answer 1

Use Javascript or jQuery redirection

<script>
   $('#accordion a').click(function(){
     window.location = $(this).attr('href');
     return false;
   });
</script>

Answer 2

The solution to my problem was found here .

I added an event listener to the <a> tag and used jQuery's stopPropagation() method to prevent the Bootstrap Collapse from taking over.

$("a.invoice-link").click(function(event){
    event.stopPropagation();
});