Hide expanded sub menu when another one selected

Question

And the I want to expand sub menu when user clicks on it with animation:

angular.module('testApp', ['ngAnimate'])
  .controller('testController', ['$scope',
    function($scope) {
      $scope.workshops = [
        { name: "Workshop audience", id: 'audience' },
        { name: "Workshop catalog", id: 'catalog' },
        { name: "Add a workshop", id: 'add_wk' },
        { name: "Add/Edit categories", id: 'add_ctg' },
        { name: "Add/Edit difficulty level", id: 'add_lvl' },
        { name: "Add/Edit a target group", id: 'add_grp' }
      ];
    }
  ])

  .animation('.slide', function() {
    var NG_HIDE_CLASS = 'ng-hide';
    return {
      beforeAddClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.slideUp(done);
        }
      },
      removeClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.hide().slideDown(done);
        }
      }
    }
  });

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>


<div ng-app="testApp" ng-controller="testController">
  <ul>
    <li class="nav-item" ng-class="{ active: isActive('/analysis/recommendation') }">
      <a class="nav-link" ng-click="expand = !expand;">Analysis</a>
      <ul class="slide" ng-show="expand">
        <li>
          <a ng-class="{active:isActive('/analysis/recommendation')}" href="#!analysis/recommendation">Recommendation</a>
        </li>
      </ul>
    </li>
    <li ng-class="{ active: isActive('/workshop/') }">
      <a ng-click="expand2 = !expand2">Workshop </a>
      <ul class="nav flex-column sub-menu slide" ng-show="expand2">
        <li data-ng-repeat="workshop in workshops">
          <a href="#!workshop/{{workshop.id}}" ng-class="{active:isActive('/workshop/'+workshop.id)}" ng-bind="workshop.name"></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

It works fine. All sub menus are displayed when I click on them, but how can I hide sub menus which are already expanded when I want to open a new one? Here is fiddle

Answer 1

Does this work?

angular.module('testApp', ['ngAnimate'])
  .controller('testController', ['$scope',
    function($scope) {
      $scope.workshops = [
        { name: "Workshop audience", id: 'audience' },
        { name: "Workshop catalog", id: 'catalog' },
        { name: "Add a workshop", id: 'add_wk' },
        { name: "Add/Edit categories", id: 'add_ctg' },
        { name: "Add/Edit difficulty level", id: 'add_lvl' },
        { name: "Add/Edit a target group", id: 'add_grp' }
      ];
      
      $scope.expandToggle= function(subMenu){
      	if (subMenu == 'expand'){
          $scope.expand = !$scope.expand;
          if($scope.expand2){$scope.expand2 = false;} 
        }
        if (subMenu == 'expand2'){
          $scope.expand2 = !$scope.expand2;
          if($scope.expand){$scope.expand = false;} 
        }
      }
      
    }
  ])

  .animation('.slide', function() {
    var NG_HIDE_CLASS = 'ng-hide';
    return {
      beforeAddClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.slideUp(done);
        }
      },
      removeClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.hide().slideDown(done);
        }
      }
    }
  });

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>


<div ng-app="testApp" ng-controller="testController">
  <ul>
    <li class="nav-item" ng-class="{ active: isActive('/analysis/recommendation') }">
      <a class="nav-link" ng-click="expandToggle('expand')">Analysis</a>
      <ul class="slide" ng-show="expand">
        <li>
          <a ng-class="{active:isActive('/analysis/recommendation')}" href="#!analysis/recommendation">Recommendation</a>
        </li>
      </ul>
    </li>
    <li ng-class="{ active: isActive('/workshop/') }">
      <a ng-click="expandToggle('expand2')">Workshop </a>
      <ul class="nav flex-column sub-menu slide" ng-show="expand2">
        <li data-ng-repeat="workshop in workshops">
          <a href="#!workshop/{{workshop.id}}" ng-class="{active:isActive('/workshop/'+workshop.id)}" ng-bind="workshop.name"></a>
        </li>
      </ul>
    </li>
  </ul>
</div>