Search code examples
javascriptjquerycssslidetoggle

Is it possible to list multiple ID's in a function, that will not trigger a .hide function?


Got a problem with my slide in menu. Check the my JSfiddle here. At the moment the slide-in menu closes, whenever clicked on everything else than the menu itself. The problem is, that the menu closes, when i click the text. I would like to perhaps list more ID's inside the same function, something like this;

if(isOpened && e.target.id!='slide-in,text')

My script:

 var isOpened = false;
    $(document).click(function(e) {
      if(isOpened && e.target.id!='slide-in') {
        $("#slide-in").removeClass("active");
        isOpened = false;
        $("#button").show();
      } else if(!isOpened && e.target.id=='button'){
        $("#slide-in").addClass("active");
        isOpened = true;
        $("#button").hide;
      }
    });

Thank you!


Solution

  • instead of checking for all the ids, check for existence of parent with id as slide-in

    if(isOpened && e.target.id!='slide-in') {
        if(!$(e.target).parents('#slide-in').length) {
            $("#slide-in").removeClass("active");
            isOpened = false;
            $("#button").show();
        }
    }
    

    check this fiddle