# Collapsible Panels With Up/Down Arrow Icon?

I have designed an accordion with up and down arrows. When I click on the whole row it is collapsing fine, but when I directly click on up/down icons it toggles the icons but does not toggle my accordion (not opening/closing my accordion). It calls my function but does not change the accordion.

I am using material icons as my icons and angularjs to call the function when I click on my accordion.

I do not know how to fix my icons behavior!

Any help much appreciate.

Here is just a piece of my code to see how I defined my accordion:

//Here is my angularjs code.

$scope.showTest = false;$scope.toggleShowTest = function () {
$scope.showTest = !$scope.showTest;
}
<div class="card">
<div class="row" data-toggle="collapse" data-target="#test" aria-expanded="false"
aria-controls="test" style="cursor: pointer;" ng-click="toggleShowTest()">
<h4 class="mb-0">
Transaction Report
</h4>
</div>
<div class="col col-md offset-md-4">
<i class="material-icons" ng-if="!showTest">keyboard_arrow_down</i>
<i class="material-icons" ng-if="showTest">keyboard_arrow_up</i>
</div>
</div><!-- row ends -->
</div>