I have four buttons and four div. Now, I want to show only one div at a time. It means, if I click the first button, only the first div should be visible and the others should be hidden.

I have searched a lot with no luck. Please help me. I have tried just to show as below:

html

<button  ng-click=showAbout();>About Page</button>

  <button ng-click=showhelp();>Help page</button>

  <button ng-click=showinfo();>Info Page</button>

  <button  ng-click=showref();>Refrence page</button>



  <div class=form-group ng-show=showabout>

    <p>About page</p>

  </div>



  <div class=form-group ng-show=showhelp >

    <p>Help page</p>

  </div>



  <div class=form-group ng-show=showinfo >

    <p>Info</p>

  </div>



  <div class=form-group ng-show=showref >

    <p>Refrence</p>

  </div>

js

$scope.showabout = true;

$scope.showAbout = function () {

  $scope.showhelp = false;

  $scope.showinfo = false;

  $scope.showref = false;

};



$scope.showhelp = true;

$scope.showhelp = function () {

  $scope.showabout = false;

  $scope.showinfo = false;

  $scope.showref = false;

};



$scope.showinfo = true;

$scope.showinfo = function () {

  $scope.showabout = false;

  $scope.showhelp = false;

  $scope.showref = false;

};



$scope.showref = true;

$scope.showref = function () {

  $scope.showabout = false;

  $scope.showhelp = false;

  $scope.showinfo = false;

};