Disable click on accordion heading preventing it top open

Question

I'm not able to disable click on uib-accordion heading which I want to open only when I click on the arrow at the right.

I also have a button on the header that will be displayed on click of text Show button but don't open accordion and also on click of button accordion should not be opened. I tried by giving css style="pointer-events:none" but this feature is disabling the whole header span.

<div style="pointer-events:none">
    <span ng-click="showButton=!showButton">Show button but don't open accordion</span>
               <button ng-if="showButton" type="button">Click</button>
</div>

Plunker link here

Answer 1

Use a function to call preventDefault and stopPropagation.

     $scope.toggleButton = function($event){
           $event.stopPropagation();
           $event.preventDefault();
           $scope.showButton=!$scope.showButton;
     };

Link : http://plnkr.co/edit/vpR8NHuAopYinBRmhnPF?p=preview