Slide out hide when clicked elsewhere

Question

So, I have a slide out div that can be opened and closed on a button. But I want it to close when you click away from it instead. So open on a button, close when a user clicks somewhere else.

How can I achieve that with this code?

$(document).ready(function() {
  var slider_width = $('.slider').width();
  $('#slider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated')) {
      $('.slider,#slider-button').animate({"margin-right": '-='+slider_width});
    }
    else {
      if(!$(this).is(':animated')) {
        $('.slider,#slider-button').animate({"margin-right": '+='+slider_width});
      }
    }
  });
});

.slider{
    position:fixed;
    height:100%;
    background:yellow;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#slider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background: red;
    top:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>

Please be as detailed as possible, I'm still learning this and I'm easily confused.

Thank you!

Are you sure about this: `'-='` in `"margin-right": '-='+slider_width` ? — Farzin Kanzi, May 01 '17 at 14:41

csharpbd · Answer 1 · 2017-05-01T14:38:59.770

Please check this. If your slider is opened and you click anywhere it will close. If your slider is opened then Number($('#slider-button').css("margin-right").replace('px','')) will give the value of margin-right and this must be greater than > 0.

$(document).ready(function() {
  var slider_width = $('.slider').width();
  $('#slider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated')) {
      $('.slider,#slider-button').animate({"margin-right": '-='+slider_width});
    }
    else {
      if(!$(this).is(':animated')) {
        $('.slider,#slider-button').animate({"margin-right": '+='+slider_width});
      }
    }
  });
  
  $(document).click(function(){
    if(Number($('#slider-button').css("margin-right").replace('px',''))>0){
      $('#slider-button').click();
    }
  });
});

.slider{
    position:fixed;
    height:100%;
    background:yellow;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#slider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background: red;
    top:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>

You have to check the snippet using `Full page`, because of your `css`. — csharpbd, May 01 '17 at 14:36
This is awesome, csharpbd! But is there a way I could add animation to it, so it doesn't just vanish but slide back? — Retros, May 01 '17 at 14:40
I think you don't need to add any custom animation on it, because I've click `$('#slider-button').click();`. It will animate by default. — csharpbd, May 01 '17 at 14:45

score 1 · Accepted Answer · edited May 23 '17 at 11:54

I've devised a method using a property of every events called path. You can see the orginal answer I've posted over here . Basically it is a "static ordered list of all its ancestors in tree order" and my code checks if an element is present in it else does a set of code , hide a menu in your case. In your case it checks for two elements as the button is not within the menu container. Any click on an element within the menu container wont close the menu as its event.path contains the container as it propagates up to window.

var slider_width = $('.slider').width();
$('#slider-button').click(function() {
  if ($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) {
    $('.slider,#slider-button').animate({
      "margin-right": '-=' + slider_width
    });
  } else {
    if (!$(this).is(':animated')) {
      $('.slider,#slider-button').animate({
        "margin-right": '+=' + slider_width
      });
    }
  }
});

$("body").click(function() {
  target1 = $(".slider")[0];
  target2 = $("#slider-button")[0];
  flag = event.path.some(function(el) {
    return (el == target1 || el == target2)
  });
  if (!flag) {
    if ($(".slider").css("margin-right") != "-200px") {
      $('.slider,#slider-button').animate({
        "margin-right": '-=' + slider_width
      });
    }
  }
});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.slider {
  position: fixed;
  height: 100%;
  background: yellow;
  width: 200px;
  right: 0px;
  margin-right: -200px;
}

#slider-button {
  position: fixed;
  width: 100px;
  height: 50px;
  right: 0px;
  background: red;
  top: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>

: How do I detect a click outside an element?

score 0 · Answer 3 · edited May 01 '17 at 18:56

0

$(document).mouseup(function (e)
{
    var container = $("#slider-button");
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

edited May 01 '17 at 18:56

R. Oosterholt

7,720
2
53
77

answered May 01 '17 at 14:35

Osama

2,912
1
12
15

Slide out hide when clicked elsewhere

3 Answers3