CODEWITHSUNDEEP
angularjs
Bhavesh Chauhan
Bhavesh Chauhan

Reputation: 1053

How close all other menu when click specific menu in angular js?

I have use toggle menu from simple toggle .but my problem that when we click on specific menu then all other menu should be close like as accordion menu.

Directive :

element.bind('click', function() {
                var content = target.querySelector('.slideable_content');
                if(!attrs.expanded) {

                    content.style.border = '1px solid rgba(0,0,0,0)';
                    var y = content.clientHeight;
                    content.style.border = 0;
                    target.style.height = y + 'px';
                } else {
                    target.style.height = '0px'; 
                }
                attrs.expanded = !attrs.expanded;
            });

when click on slide above code will execute.i need some logic like close all toggle which class name slidable_content

My Code is here : Plunker

Upvotes: 3

Views: 4795

Answers (1)

Luis Saraza
Luis Saraza

Reputation: 346

@Michael is right, you can use the two way data binding to do that easily

<section>
  <ul>
    <li>
      <span ng-click="isExpanded = ! isExpanded">Show 1</span>
    </li>
    <li ng-show="isExpanded" slider id="test2">
      <p>Are to hide and show adf</p>
    </li>
  </ul>
</section>

So, you can control the state of the other menus if you want

UPDATE:

Try this: 

<section>
    <ul>
        <li slider-toggle ng-click="expandItem = 1">Slider 1</li>
        <li ng-if="expandItem == 1" slider id="test1">
            <p>Are to hide and show</p>
        </li>

        <li slider-toggle ng-click="expandItem = 2">Slider 2</li>
        <li ng-if="expandItem == 2" slider id="test2">
            <p>Are to hide and show</p>
        </li>

        <li slider-toggle ng-click="expandItem = 3">Slider 3</li>
        <li ng-if="expandItem == 3" slider id="test3">
            <p>Are to hide and show</p>
        </li>

        <li slider-toggle ng-click="expandItem = 4">Slider 4</li>
        <li ng-if="expandItem == 4" slider id="test4">
            <p>Are to hide and show</p>
        </li>
    </ul>
</section>

In this way you can create an accordion menu, just getting the value of the element that you want to show and validating it with the ng-if directive (you can use ng-show if you want, you can find the difference here: docs.angularjs.org/api/ng/directive)

Note:

You shouldn't get elements of the DOM with jquery or javascript selectors, if you want to control an element of the DOM you can use a directive, as an example:

script.js:
.directive('someDirective',function(){
    return{
        restrict:'A',
        scope:true,
        templateUrl:'someTemplate.html',
        link: function(scope, element, attrs){
            console.log(element) //This will be your element
        }
    }
})

main.html:
<li some-directive ng-click="expandItem = 4">Slider 4</li>

UPDATE

If you want to close the current open item, you can control the open/close state with a function.

Try this:

main.html

   <body ng-app="myApp">
        <section ng-controller="myCtrl">
            <ul>
                <li slider-toggle ng-click="setCurrentItem(1)">Slider 1</li>
                <li ng-show="currentItem == 1" slider id="test1">
                    <p>Are to hide and show</p>
                </li>
                <li slider-toggle ng-click="setCurrentItem(2)">Slider 2</li>
                <li ng-show="currentItem == 2" slider id="test2">
                    <p>Are to hide and show</p>
                </li>
                <li slider-toggle ng-click="setCurrentItem(3)">Slider 3</li>
                <li ng-show="currentItem == 3" slider id="test3">
                    <p>Are to hide and show</p>
                </li>
                <li slider-toggle ng-click="setCurrentItem(4)">Slider 4</li>
                <li ng-show="currentItem == 4" slider id="test4">
                    <p>Are to hide and show</p>
                </li>
            </ul>
        </section>
    </body>

app.js

var myApp = angular.module('myApp', []);

myApp.controller("myCtrl", ["$scope", function ($scope) {
    $scope.currentItem = null;

    $scope.setCurrentItem = function (itemId) {
        if(itemId == $scope.currentItem){
            $scope.currentItem = null;
        }else{
            $scope.currentItem = itemId;
        }

    }
}])

Upvotes: 3

Related Questions