bootstrap panel with button - collapse issue

Here is my code:

<div class="panel panel-default">
    <div class="panel-heading clearfix" role="tab" id="heading-details" data-toggle="collapse" data-target="#details" data-parent="#panel-group" href="#details">
       <h4 class="panel-title pull-left">My panel title</h4>

       <a class="btn btn-primary btn-sm pull-right" asp-action="Action">
            <span class="glyphicon glyphicon-pencil"></span>
        </a>
    </div>
    <div id="details" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
            @Html.Partial("_DetailsPartial", Model)                
        </div>
    </div>
</div>

Issue:

When I click on a button link then panel body expands/collapses. I don't want to toggle panel body when clicking on button.

How can I turn off data-toggle on the button?

Thanks in advance