You can use the [Angular-UI Accordion][1] and set `close-others="true"`.  

Then wire up whatever logic you want in each repeat block.

### Here's a demo in StackSnippets





    var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
    app.controller('ui.bootstrap.ctrl', function ($scope) {

      $scope.numOfMaps = [ 
        {count: 1, text: "Text 1", header: "Header 1"},
        {count: 2, text: "Text 3", header: "Header 2"},
        {count: 2, text: "Text 3", header: "Header 3"}
      ];

    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>

    <div ng-app="ui.bootstrap.module" >
      <div ng-controller="ui.bootstrap.ctrl">


        <accordion close-others="true">
          
          <accordion-group ng-repeat="x in numOfMaps" 
                           heading="{{x.header}}" 
                           is-open="status.isFirstOpen" 
                           is-disabled="status.isFirstDisabled">
            {{x.text}}
          </accordion-group>
          
        </accordion>

      </div>
    </div>



[1]: https://angular-ui.github.io/bootstrap/#/accordion

I used the tutorial on w3schools.com to create my panel, but when I added, angular, my code stopped working.

**Here's my code**:



    <div class="panel-group" id="accordion">
      <div ng-repeat="x in numOfMaps">
        <div class="panel {{x.count}}Details">
          <div class="panel-heading">
            <li class="m2Details m3Details panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}buildingToggle">
                Building<span class="caret"></span>
              </a>
            </li>
          </div>
          <div id="{{x.count}}buildingToggle" class="panel-collapse collapse {{x.buildingOpen}}">
            <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}} panel-body">
              <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
                <img src="{{y.icon}}" width="15px" height="15px">{{y.name}}
              </a>
            </li>
          </div>
        </div>
        <div class="panel {{x.count}}Details">
          <div class="panel-heading">
            <li class="m2Details m3Details panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}offsiteToggle">
                Offsite<span class="caret"></span>
              </a>
            </li>
          </div>
          <div id="{{x.count}}offsiteToggle" class="panel-collapse collapse {{x.offsiteOpen}}">
            <li ng-repeat="z in this[x.count + 'InfoOffsite']" class="{{z.linkclass}} panel-body">
              <a href="{{z.link}}" ng-click="clickLinks(z.initialOut,z.initialIn,z.backIn,z.backOut,z.name)">
                <img src="{{z.icon}}" width="15px" height="15px">{{z.name}}
              </a>
            </li>
          </div>
        </div>
      </div>

I've looked at these StackOverflow questions:

* [Accordion effect not working for menu][1]
* [Bootstrap Accordion with dynamic data doesn't work properly][2]

Perhaps there are others, but I haven't found anything that works for me. The code works perfectly otherwise. I got the panel to display the way I want, and the Angular is filling in fine. 

My Problem is the panels don't close when another one opens.

I am using UI Bootstrap, so a solution that uses that is acceptable.

[1]: https://stackoverflow.com/q/29770323
[2]: https://stackoverflow.com/q/27628975/1366033


----------


**UPDATE:** With an answer below I have something sort of working, this seems to be what I am going for, however there are a couple of kinks that I don't understand how to work out:



    <accordion close-others="true">

      <accordion-group ng-repeat="x in numOfMaps" class="{{x.count}}Details" 
                       heading="Building" data-target="#{{x.count}}BuildingToggle" 
                       is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
        <ul id="{{x.count}}BuildingToggle" class="accordion-body">
          <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}}">
            <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
              <img src="{{y.icon}}" width="15px" height="15px">
              {{y.name}}
            </a>
          </li>
        </ul>
      </accordion-group>

As soon as I add the js script that makes the status function:

    $scope.status = {
        isFirstOpen: true,
        isFirstDisabled: false
    };

They all start open for a second then force close and wont reopen. How do I bypass this? I need a way to make each accordion unique because I think they are working off of each other because there is no data-target to tell which panel to open and close or something I don't know. Anyone know? I need that JS for the functionality because I need one accordion to stay open and be disabled, while the others can open and close.