I am currently facing an issue where I want to insert a button within a collapse section of an accordion that will navigate to a different page upon being clicked. However, the problem is that when I attempt to click the button, it simply closes the collapse instead.
<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 that poses the clicking issue in my scenario -->
<div class="col-3 p-1 align-self-center"><a href="active_chore.php?todo_id=242" class="btn btn-info" role="button"><strong>View Chore</strong></a></div>
</div>
</div>
</div>
</div>Surprisingly, running the code snippet on Stack Overflow yields successful results unlike the behavior observed in my personal browser. Clicking anywhere within the card-body area ends up concealing the collapsible element instead.
Your assistance with resolving this matter would be greatly appreciated. Thanks, Seth