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

Question

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

First you shouldn't mix jQuery, Angular.element and pure Javascript .getElementById. That makes your code more difficult to read. - Why don't you let Angular handle the expand and collapse for you. Use ng-show="isExpanded" on the "slider" and keep the state in $scope model — Michael
– Michael, Commented May 4, 2015 at 9:53

Luis Saraza · Accepted Answer · 2015-05-08 13:13:44Z

3

@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;
        }

    }
}])

edited May 8, 2015 at 13:13

answered May 4, 2015 at 15:15

Luis Saraza

3561 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhavesh Chauhan Over a year ago

but how is possible in multiple?also how to auto colse other ?

Luis Saraza Over a year ago

You can use ng-click and ng-if/ng-show to do that you want, look at the updated answer, hope it helps!

Bhavesh Chauhan Over a year ago

But when open any li on one click .it also want to close on second click like as toggle.please give little change

Luis Saraza Over a year ago

@KishorParmar there is the updated answer, hope it helps! and you are welcome!

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related