How to slide-in drawer menu when clicked outside of menu in website?

Question

I don't get it, what am I doing wrong? The element slides out on mouse click, but never slides in.

$(document).ready(function() {
  var $okviric = $('#okviric');
  var $slide = false;

if ($slide){
  $okviric.on('click', function(){
    TweenLite.to($okviric, 0.7, {bottom: 180, opacity: 0.7, ease:Power4.easeInOut});
      $slide = false;});
}else{
  $okviric.on('click', function(){
    TweenLite.to($okviric, 0.7, {bottom: 0, opacity: 1, ease:Power4.easeInOut});
      $slide = true;});
};
});

Answer 1

The problem is that you are checking for condition only once.

If $slide is false. The else part sets the onclick. After that this condition is never checked again until you reload the page. But as soon as you reload $slide is again set to false.

Solution is check this condition inside your onclick method.

$okviric.on('click', function(){
      if($slide){
       // 
           TweenLite.to($okviric, 0.7, {bottom: 180, opacity: 0.7, ease:Power4.easeInOut});
            $slide = false;});
      }  else {
      //
           TweenLite.to($okviric, 0.7, {bottom: 0, opacity: 1, ease:Power4.easeInOut});
           $slide = true;});
      }

Now it will work properly.