twitter bootstrap accordion effect not working for menu

Question

I have parent menu with sub menus, but the accordion effect is not working for menus.(if second menu link clicks, automatically the first menu should close)

I have created the code in plunker,

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

view

<div id="sidebar-wrapper"> 
    <ul class="panel sidebar-nav" ng-repeat="item in model | orderBy:'sortOrder'">
    <li>
    <a class="dropdown-toggle mainMenu menuArrow" href="javascript:void(0)" >{{item.description}}
     <i class="sub_icon fa fa-lg fa-fw {item.iconTarget}}"></i>
   </a>
   <ul class="submenu" style="display: none;">
     <li ng-repeat="subitem in item.children">
        <a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a>
      </li>
   </ul>
  </li>
 </ul>
</div>

I would use AngularJS `ng-Class` to switch class. Don't have more time If I have I show an example in answer [angular ng-class](https://docs.angularjs.org/api/ng/directive/ngClass) — MacKentoch, Apr 21 '15 at 11:18
Hi Mac, it is working if i use static content instead of dynamic — vishnu, Apr 21 '15 at 11:22
Looks like you're missing some of the attributes needed for the bootstrap accordion. You should check your code against this link: https://angular-ui.github.io/bootstrap/#/accordion — chriszumberge, Apr 21 '15 at 13:09

score 1 · Answer 1 · answered Apr 23 '15 at 06:02

finally its working fine with small change,

<div id="sidebar-wrapper">
    <div id="accordion">
      <ul class="panel sidebar-nav" ng-repeat="item in model | orderBy:'sortOrder'" id="sidebar{{$index}}">
        <li>
          <a href="javascript:void(0)" class="mainMenu menuArrow collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#child{{$index}}" ng-click="model.selected = item">{{item.description}}
             <i class="sub_icon fa fa-lg fa-fw {{item.iconTarget}}"></i>
          </a>
        </li>
        <li id="child{{$index}}" data-menu-title="{{item.description}}" ng-class="{'collapse':true}">
          <ul>
            <li ng-repeat="subitem in item.children">
             <a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a>
            </li>
          </ul>
        </li>
     </ul>
    </div>
</div>

Nice, this solution was the one I was looking for before switching easy Angular UI.The trick I didn't implement was id="child{{$index}}" — MacKentoch, Apr 23 '15 at 06:13

MacKentoch · Accepted Answer · 2015-04-21T19:05:24.470

back, (after a hard day...) and as promise :

better than ng-Class (like I said earlier), I suggest Angular UI (Twitter Bootstrap written natively in AngularJS)

<!doctype html>
<html ng-app="ui.bootstrap.demo">
 <head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
 <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">


<script>

//here in your javascript file (here is a demo)    
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);     
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {


$scope.oneAtATime = true;

    $scope.model = [
      {
          "code": "401",
          "description": "Transactions",
          "labelName": null,
          "target": null,
          "children": [
              {
                  "description": "Deposit Funds",
                  "target": "transds",
                  "children": null
              },
              {
                  "description": "Withdraw Funds",
                  "target": "fdfdfs",
                  "children": null
                }
            ]
         },
        {
          "code": "403",

             "description": "Cash Management",
             "labelName": null,
             "target": null,
             "children": [
               {
                     "description": "Head Cashier - Entry",
                     "target": "ccry.html",
                     "children": null
              },
              {
                  "description": "Head Cashier - Verify",
                  "target": "ccg.html",
                  "children": null
              }
          ]
      }
   ];

});      

 </script>


</head>
<body>

<div ng-controller="AccordionDemoCtrl">
<label class="checkbox">
<input type="checkbox" ng-model="oneAtATime">
  Open only one at a time
</label>
<p>Example amazing angular accordion</p>



 <accordion close-others="oneAtATime" >
   <div ng-repeat="item in model | orderBy:'sortOrder'">
   <accordion-group>
     <accordion-heading>
       {{item.description}} <i class="sub_icon fa fa-lg fa-fw {{item.iconTarget}}"></i>
     </accordion-heading>

     <div ng-repeat="subitem in item.children">
         <a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a>
     </div>
   </accordion-group>
   </div>
 </accordion>


 </div>
 </body>
</html>

Next I let you apply your own css and move js in a file.

twitter bootstrap accordion effect not working for menu

view

2 Answers2

back, (after a hard day...) and as promise :

Linked