Putting a button inside a collapsing card in Bootstrap - html

Question

I am trying to put a button in a collapse (part of an accordion) that will go to a new page when clicked. But right now when I try to click the button, it instead just closes the collapse.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header p-1">
<a class="card-link stretched-link text-body" data-toggle="collapse" href="#collapseOne">
<div class="row no-gutters">
<div class="col-8 pl-1"><strong>Title </strong></div>
<div class="col-4 text-right"><span class="badge badge-danger p-1">High Priority</span></div>
</div>
<div class="row no-gutters">
<div class="col text-center">
<!-- Lock this to prevent word wrap from too mane names -->
<span class="badge badge-pill badge-primary mr-1">Name</span><span class="badge badge-pill badge-primary mr-1">Name</span><span class="badge badge-pill badge-warning mr-1">Name</span>
</div>
</div>
</a>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body p-1">
<div class="row no-gutters">
<div class="col-9">
<div class="row m-0 p-0 ">
<div class="col-sm">
<div class="row">
<div class="col text-center">
<small><strong>Start:</small></strong><br>30 May 08:00
</div>
<div class="col text-center">
<small><strong>Late/Expire:</small></strong><br>30 Jun 16:00
</div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col text-center">
<small><strong>Category</small></strong><br>Catering
</div>
<div class="col text-center">
<small><strong>Reward:</small></strong><br>300
</div>
</div>
</div>
</div>
</div>
<!-- Here is the button I can't seem to click -->
<div class="col-3 p-1 align-self-center"><strong>View Chore</strong></div>
</div>
</div>
</div>
</div>
Oddly enough, when I put the snippet and run it on stack overflow, it works fine. But when I run it in my browser, clicking anywhere in the card-body hides the collapse element.
Thanks for the help
Seth

Answer 1

Never mind, I found it. The "stretched-link" in the card header is making the whole card, including the body a stretched-link. For some reason the stack overflow snippet doesn't do that but the Chrome browser does.