CODEWITHSUNDEEP
javascripthtmlcss
AlexisCraig
AlexisCraig

Reputation: 526

Accordion menu that is not closed

I have this code in the controller of my menu, which allows me to display a sub-menu.

$scope.groups = [];
  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };

As you can see, I have a "Products" menu, and in this menu, I have 3 categories. The code works, but unfortunately the categories are directly visible, while I would like to see that when you click on "Products"

<ion-item class="item-stable item" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
  <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
  &nbsp;Products
</ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)" ui-sref="menu.disponibilites" menu-close="">Category 1</ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)" ui-sref="menu.organiseVisite" menu-close="">Category 2</ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)" ui-sref="menu.trouverUnJeune" menu-close="">Category 3</ion-item>

In my css I have this

.list .item.item-accordion {
    line-height: 15px;
    padding-top: 0;
    padding-bottom: 0;
    transition: 0.09s all linear;
  }
  .list .item.item-accordion.ng-hide {
    line-height: 0px;
  }
  .list .item.item-accordion.ng-hide-add,
  .list .item.item-accordion.ng-hide-remove {
    display: block !important;
  }

Upvotes: 1

Views: 46

Answers (1)

DaxDev
DaxDev

Reputation: 651

In the controller you my $scope.groups and in the page you put group. That's why you have this problem

Upvotes: 1

Related Questions