Need to toggle CSS slide-in function with click on different div?

Question

I have this JSfiddle and i need to slide in, when clicking on a div, and not when page is loaded. Simultaneously it should be possible to close by clicking anywhere outside the slide-in box.

$( document ).ready(function() {
    $(function(){
        $(".slide-in").addClass("active");
        console.log($(".slide-in"));   
    });
});

I think the solution could be some kind of toggle system, but i can't figure out how to?

Thank you!

Answer 1

Opens the slider on click of .button. Closes it on click anywhere outside the slider (including the button)

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

---

Better is to use IDs. So your code would be:

<div id="slide-in"></div>
<div id="button"></div>

and the javascript:

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

You'll also need to change the CSS from classes to IDs