AngularJS toggle using same functions
HTML
<div ng-app="app">
<div ng-controller="CommentController">
<div ng-repeat="list in lists">
<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>
<div ng-show="hiddenDiv">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i>
</div>
</div>
</div>
</div>
CSS
body {
font-family:sans-serif;
background-color: #f5f5f5;
}
.review {
margin-bottom: 12px;
}
JavaScript
var app = angular.module('app', []);
app.controller('CommentController', function ($scope) {
$scope.hiddenDiv = true;
$scope.showDiv = function () {
$scope.hiddenDiv = !$scope.hiddenDiv;
};
$scope.lists = ["one", "two", "three", "four", "five"];
});