[Desertt]

Hi i'm using those function to open div on a button and if clicked outside the div it close

$("#RightMenu").click(function() {
	var img1 = '<img src="./MediumImages/Right-Menu-Icon_IPad.png">';
	var img2 = '<img src="./MediumImages/Close-Icon_IPad.png">';
	var img =  $(this).html();
	if(img == img1) {
		$(this).html(img2);
		$("#menu_hidden").show();
	}
	else {
		$(this).html(img1);
		$("#menu_hidden").hide();
	}
	$(".left_hidden_menu").hide();
	$("#LeftMenu").html('<img src="./MediumImages/Left-Menu-Icon_IPad.png">');
});
$("#LeftMenu").click(function() {
	var img1 = '<img src="./MediumImages/Left-Menu-Icon_IPad.png">';
	var img2 = '<img src="./MediumImages/Close-Icon_IPad.png">';
	var img =  $(this).html();
	if(img == img1) {
		$(this).html(img2);
		$(".left_hidden_menu").show();
	}
	else {
		$(this).html(img1);
		$(".left_hidden_menu").hide();
	}
	$("#menu_hidden").hide();
	$("#RightMenu").html('<img src="./MediumImages/Right-Menu-Icon_IPad.png">');
});
$(document).mouseup(function (e) {
	var container = $("#menu_hidden");
	
	if (!container.is(e.target) // if the target of the click isn't the container...
	  && container.has(e.target).length === 0) // ... nor a descendant of the container
	{
			container.hide();
	}
	
	var container1 = $(".left_hidden_menu");
	
	if (!container1.is(e.target) // if the target of the click isn't the container...
	  && container1.has(e.target).length === 0) // ... nor a descendant of the container
	{
		container1.hide();
	}
});

I'm trying to change the image from

if (!container.is(e.target) // if the target of the click isn't the container...
	  && container.has(e.target).length === 0) // ... nor a descendant of the container
	{
                        var img = $("#RightMenu").html();
                        if(img == img1) {
		        $(this).html(img2);
			container.hide();
	}

But when i added this code the container always stay closed , I've used a code for the opening

$("#RightMenu").click(function() {
	var img1 = '<img src="./MediumImages/Right-Menu-Icon_IPad.png">';
	var img2 = '<img src="./MediumImages/Close-Icon_IPad.png">';
	var img =  $(this).html();
	if(img == img1) {
		$(this).html(img2);
	else
		$(this).html(img1);
        $("#menu_hidden").toggle;
	$(".left_hidden_menu").hide();
	$("#LeftMenu").html('<img src="./MediumImages/Left-Menu-Icon_IPad.png">');
});

but the toggle function stoped working is there any solution ?

[andrewsw]

Are there errors in your browser's console?

[Desertt]

No errors at all , i fired some alerts and i worked also correctly but as i mention the result wont show as i expected, second why the .toggle() not working if i added the .mouseup function ?

[Desertt]

Any other suggestions ?

[ArtificialSoldier]

The code you posted has a syntax error, either you're not checking for errors or you're not posting the right code. What code are you using now?

[Desertt]

This is the code that i'm using right now

<script>
$("#RightMenu").click(function() {
	var img1 = '<img src="./MediumImages/Right-Menu-Icon_IPad.png">';
	var img2 = '<img src="./MediumImages/Close-Icon_IPad.png">';
	var img =  $(this).html();
	if(img == img1) {
		$(this).html(img2);
		$("#menu_hidden").show();
	}
	else {
		$(this).html(img1);
		$("#menu_hidden").hide();
	}
	$(".left_hidden_menu").hide();
	$("#LeftMenu").html('<img src="./MediumImages/Left-Menu-Icon_IPad.png">');
});
$("#LeftMenu").click(function() {
	var img1 = '<img src="./MediumImages/Left-Menu-Icon_IPad.png">';
	var img2 = '<img src="./MediumImages/Close-Icon_IPad.png">';
	var img =  $(this).html();
	if(img == img1) {
		$(this).html(img2);
		$(".left_hidden_menu").show();
	}
	else {
		$(this).html(img1);
		$(".left_hidden_menu").hide();
	}
	$("#menu_hidden").hide();
	$("#RightMenu").html('<img src="./MediumImages/Right-Menu-Icon_IPad.png">');
});
$(document).mouseup(function (e) {
	var container = $("#menu_hidden");
	var container1 = $(".left_hidden_menu");
	
	if (!container.is(e.target) // if the target of the click isn't the container...
	  && container.has(e.target).length === 0) // ... nor a descendant of the container
	{
			container.hide();
	}
	
	if (!container1.is(e.target) // if the target of the click isn't the container...
	  && container1.has(e.target).length === 0) // ... nor a descendant of the container
	{
		container1.hide();
	}
});
</script>

This post has been edited by Desertt: 28 January 2016 - 12:04 AM

[ArtificialSoldier]

It's going to run both of those event handlers when you click (it will run one for the element you clicked on, and then the mouseup handler). Add some console.log statements into those functions to figure out what is going on. It's probably immediately hiding the element that it just showed.