javascript - Collapse with only one item opened not working in AngularJS -

i'm attempting customize collapse in app. i've tried accordion plugin comes angularjs ui bootstrap, rather complex, need 2 links side side , collapsing elements opening in row under, i've decided include transition.js , collapse.js bootstrap.

so far code looks this:

<div class="logo" id="accordion">       <a data-parent="#accordion" data-toggle="collapse" data-target="#login">         log in       </a>        <a data-parent="#accordion" data-toggle="collapse" data-target="#signup">         sign       </a>        <div id="signup" class="collapse">dfkñfkldsklñfdsñlkfd ñlkdflkfdñlfsdñl ksfdlkfdslñsfdñl kfdkfkldl fdksñlfdklfdñksfd        <div id="login" class="collapse">blablabla</div>  </div> 

the collapse effect works perfectly, far haven't been able accomplish "only 1 item opened @ time" effect.

might kind of conflict angularjs files?

here's working plunker.

i think short answer need have 2 variables logincollapsed , signupcollapsed , manage mutual exclusivity in controller. eg:

// untested $scope.$watch('logincollapsed', function(val){   signupcollapsed = !logincollapsed; }) 

the angular-ui guys set practices , have accordion optionally opens 1 or many bellows:

source of implementation:

if ( closeothers ) {   angular.foreach(this.groups, function (group) {     if ( group !== opengroup ) {       group.isopen = false;     }   }); } 

https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js#l13