CODEWITHSUNDEEP
javascriptjquerycssslidetoggle
Mikkel Lehrmann
Mikkel Lehrmann

Reputation: 65

Toggle hide ID on click function, show when function toggled again?

I need some help with this: JSfiddle. The problem is, that i would like the button to display:none, or in some way hide, whenever the class .active isOpened - if that makes any sense?

If you look at my JSfiddle, i need the button top/right to dissapear, when ever the slide-out menu/box is out.

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

Thank you!

Upvotes: 2

Views: 109

Answers (3)

Joel Jaun
Joel Jaun

Reputation: 66

Change your Js with:

$('#button').click(function(e){
    $('#slide-in').addClass('active');
  if($('#slide-in').not(':hidden').length > 0)
    $('#button').hide();
});

$('#slide-in').click(function(e){
    $(e.currentTarget).removeClass('active');
  $('#button').show();
});

When you klick the button your Menu left fades in and the button will disappear. When you click then on the open menu the menu will close and the button will appear again.

JSFiddle Link

Upvotes: 0

Yash Vora
Yash Vora

Reputation: 61

Just hide and show the button respectively in the condition.

    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();
      }
    });

Here's the Fiddle link

Upvotes: 1

kpucha
kpucha

Reputation: 729

Your code works fine. The only problem I see is that if you click on a element within the slide-in with other id, it will close your div too. But I don't know if its the dessire beahviour.

Here is an examle of what I'm saying:

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;
		  }
		});
body {
	margin: 0;
	padding: 0;
}

#slide-in {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    box-shadow: inset -10px 0 5px -5px rgba(0,0,0,0.2);
    transition-property: margin-left;
    transition-duration: 0.6s;
    -webkit-transition-property: margin-left;
    -webkit-transition-duration: 0.6s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0s;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: -300px;
}

#slide-in.active {
	  margin-left: 0;
}

#button {
  position: fixed;
  top: 0;
  right: 0;
  margin: 20px;
  
  width: 25px;
  height: 25px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"></div>
<div id="slide-in">
  <button id="eee">
    deded
  </button>
</div>

If you click the button dedede close the div. You can fix it with this code:

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

#slide-in {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    box-shadow: inset -10px 0 5px -5px rgba(0,0,0,0.2);
    transition-property: margin-left;
    transition-duration: 0.6s;
    -webkit-transition-property: margin-left;
    -webkit-transition-duration: 0.6s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0s;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: -300px;
}

#slide-in.active {
	  margin-left: 0;
}

#button {
  position: fixed;
  top: 0;
  right: 0;
  margin: 20px;
  
  width: 25px;
  height: 25px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"></div>
<div id="slide-in">
  <button id="eee">
    deded
  </button>
</div>

Upvotes: 0

Related Questions