Angular ng-click toggle and close

Question

Being a general angular newbie and also trying to find an answer to my question for hours. I finally gave up and figured it's probably better to ask from more knowledgable people, so here goes.

I have multiple tabs that are supposed to drop down a container. Initially nothing is open. On click a dropdown opens and when clicking again it should close. Also when clicking on another button, the current open container should close as well.

Here is my current code:

<div ng-init="item = 0">
  <div class="dropdon" ng-show="item == 1">
  </div>

    <div class="dropdon" ng-show="item == 2">
  </div>
</div>

<ul class="nav">                             
<li>
  <div class="btn"  href="#" ng-click="item = 1"
       ng-class="{ active:item == 1 }"><span>Nr1</span></div>
</li>

<li>
<div class="btn" href="#" ng-click="item = 2"
     ng-class="{ active:item == 2}"><span>Nr2</span></div>
</li>

At the moment it opens nicely when you first click on something and also toggles between the 2 opening but it will not close when clicking a open tba again. Also I am aware that all this logic should be in a controller but at the moment I am still a newbie on this part and would appreciate if someone could help me out with that.

Priyanka · Accepted Answer · 2015-09-14 09:26:35Z

1

Try this,

<div>
 <div class="dropdon" ng-show="firstitem">
 </div>

<div class="dropdon" ng-show="seconditem">
</div>
</div>

<ul class="nav">                             
 <li>
   <div class="btn"  href="#" ng-click="firstitem = !firstitem;seconditem=false"
    ng-class="{ active:item == 1 }"><span>Nr1</span></div>
 </li>

 <li>
   <div class="btn" href="#" ng-click="seconditem = !seconditem;firstitem=false"
    ng-class="{ active:item == 2}"><span>Nr2</span></div>
 </li>

answered Sep 14, 2015 at 9:26

Priyanka

2323 silver badges12 bronze badges

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

Comments

Salasar · Accepted Answer · 2015-09-14 09:35:29Z

0

You need some like this

$scope.item = 0;

$scope.toggle = function(itemPos) {
   if ($scope.item === itemPos) {
       $scope.item = 0;
   }
   else {
       $scope.item = itemPos;
   }
}

And in HTML

<div>
  <div class="dropdon" ng-show="item === 1"></div>
  <div class="dropdon" ng-show="item === 2"></div>
</div>

<ul class="nav">                             
  <li>
    <div class="btn" ng-click="toggle(1)" ng-class="{ active:item === 1 }"><span>Nr1</span></div>
  </li>

  <li>
    <div class="btn" ng-click="toggle(2)" ng-class="{ active:item === 2}"><span>Nr2</span></div>
  </li>
</ul>

See at plnkr

edited Sep 14, 2015 at 9:35

answered Sep 14, 2015 at 9:29

Salasar

13610 bronze badges

Collectives™ on Stack Overflow

Angular ng-click toggle and close

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related