bootstrap data-toggle affects button in header

Question

Is there a way to have the header be clickable so that it acts as accordion, but buttons that are inside of it, not?

<div class="row">
    <div class="panel-group" id="accordion3">
        <div class="panel panel-default">
            <div class="panel-heading panel-heading-clickable" data-toggle="collapse" data-parent="#accordion3" data-target="#collapseThree">
                <div class="btn-group pull-right">
                    <a href="" class="btn btn-default btn-xs" ng-click="vm.ProcessData(2015)">2015</a>
                    <a href="" class="btn btn-default btn-xs" ng-click="vm.ProcessData(2016)">2016</a>
                    <a href="" class="btn btn-default btn-xs" ng-click="vm.ProcessData(2017)">2017</a>
                    <a href="" class="btn btn-primary btn-xs" ng-click="vm.ProcessData(2018)">2018</a>
                </div>
                <h4 class="panel-title" style="padding-top: 5px;">Plugin Frequency Use:</h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse in">
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
</div>

As is right now, every click on the header or the button collapses the body of the div.

Also little dropdown arrows show up next to the button. How can i get rid of them?

Answer 1

You can try to stop event propagation:

<a href="" class="btn btn-default btn-xs" ng-click="vm.ProcessData(2015); $event.stopPropagation();">2015</a>

please read more about stopPropagation method and event object inside of ngClick directive

Answer 2

this might help you

    $("#accordion3").on('click', '.btn' , function(){
       return false;
     })

try here jsfiddle