show one div and hide others on button click in angularjs

Question

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;
};

You are overwriting your booleans with functions, since you are assigning them to the same name. — muenchdo
– muenchdo, Commented Oct 1, 2015 at 9:50

Upalr · Accepted Answer · 2018-11-07 03:54:01Z

6

Use this: Fiddle

   <button  ng-click="show = 1">About Page</button>
   <button  ng-click="show = 2">Help page</button>
   <button  ng-click="show = 3">Info Page</button>
   <button  ng-click="show = 4">Refrence page</button>

    <div class="form-group" ng-show="show==1" >
       <p>About page</p>
    </div>

    <div class="form-group" ng-show="show==2" >
       <p>Help page</p>
    </div>

    <div class="form-group" ng-show="show==3" >
       <p>Info</p>
    </div>

    <div class="form-group" ng-show="show==4" >
       <p>Refrence</p>
    </div>

edited Nov 7, 2018 at 3:54

answered Oct 1, 2015 at 9:50

Upalr

2,1462 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jigar Makwana Over a year ago

hi..Thanks and what about the js changes?

Jigar Makwana Over a year ago

hi..but nothing is happening on button clicks..:(

Jigar Makwana Over a year ago

ohh...sorry..i didnt have changed in my js..now its working like a charm...thanks bro..:)

Daniele Sassoli · Accepted Answer · 2015-10-01 10:26:01Z

2

Looks to me like this is the perfect use case for ng-switch.

<div ng-switch on="visibleDiv">
  <div ng-switch-when="showhelp"><p>Help page</p></div>
  <div ng-switch-when="showinfo"><p>Infopage</p></div>
  <div ng-switch-when="showref"><p>Ref page</p></div>
  <div ng-switch-default><p>About page</p></div>
</div>

so, guessing you want the showabout div to be your default div, when you click on the button just change the visibleDiv variable to whatever div you want to be visible.

EDIT: here is a plunker. JS FIDDLE

edited Oct 1, 2015 at 10:26

answered Oct 1, 2015 at 9:52

Daniele Sassoli

90812 silver badges35 bronze badges

1 Comment

Jigar Makwana Over a year ago

can you pls edit my code..i am really cant understand as i just started.

Ivin Raj · Accepted Answer · 2015-10-01 09:56:06Z

you can try this one:

$scope.showabout = true;
            $scope.show==1 = function(){

                $scope.show==2 = false;
                 $scope.show==3 = false;
                  $scope.show==4 = false;
            };
               $scope.show==2 = true;
            $scope.show==2 = function(){

                $scope.show==1 = false;
                 $scope.show==3 = false;
                  $scope.show==4 = false;
            };
             $scope.show==3 = true;
            $scope.show==3 = function(){

                $scope.show==1 = false;
                 $scope.show==2 = false;
                  $scope.show==4 = false;
            };
             $scope.show==4 = true;
              $scope.show==4 = function(){

                $scope.show==1 = false;
                 $scope.show==2 = false;
                  $scope.show==3 = false;
            };

DEMO FIDDLE

Eka Rudianto · Accepted Answer · 2015-10-01 10:03:15Z

You could try this one

this is the controller

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.divShow = "div1"

  $scope.show = function(arg) {
    $scope.divShow = arg;
  }
});

and this is the view

<button ng-click="show('div1')">show div 1</button>
<button ng-click="show('div2')">show div 2</button>
<button ng-click="show('div3')">show div 3</button>
<button ng-click="show('div4')">show div 4</button>

<div ng-show="divShow == 'div1'">div 1</div>
<div ng-show="divShow == 'div2'">div 2</div>
<div ng-show="divShow == 'div3'">div 3</div>
<div ng-show="divShow == 'div4'">div 4</div>

and this is the working plunkr that I've made

http://plnkr.co/edit/C9AEuT0p1rpFoCGpIkHz?p=preview

Collectives™ on Stack Overflow

show one div and hide others on button click in angularjs

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related