manipulating css element with jquery

Question

I'm still learning jquery.

I want to make a code, if I click on button, 2 divs will move simultaneously and the background will be overlayed by another div with opacity of 0.5

so when I click on menu button, the menu Right and menu Left will move left and right respectively

then z-index and opacity of div class="overlay" will be changed, then check if #circleMenu has .open class, if not then add .open class and move #left and #right div

I use custom defined function to run it onclick="show()"

the code does not work, when I check for problem and error on the console it says :

SyntaxError: Unexpected token. Uncaught ReferenceError: show is not defined

EDIT

thanks to @Tirthraj Barot, the error is now gone.

still my question remains, I expect the code to do this when I click on button :

1. change the overlay background opacity and z-index so it will be overlaying the body

2. move the 2 divs inside circle simultaneously

I expected it to be executed at the same time, but in reality it is not. the first time I clicked on button, only the background is overlayed, the second time, the background overlay is gone but the divs moves

      function show() {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);
      if ($("#circleMenu").hasClass("open") == true) {
       $("#circleMenu").removeClass("open");
       $("#left").css("left", "-100px");
       $("#right").css("right", "-100px");
    } else if ($("#circleMenu").hasClass("open") == false) {
       $("#circleMenu").addClass("open");
       $("#left").css("left", "100px");
       $("#right").css("right", "100px");
    }
}
$(".show").on("click", function() {
   show();
 });

body {
	margin : 0;
	padding : 0;
	width : 100%;
	height : 100%;
}
.overlay {
	width : 100%;
	height : 100%;
	background-color : gray;
	opacity : 0;
	z-index : -1;
	position : absolute;
	transition : all 1s;
}
.kontainer-menu {
	width : 50%;
	height : 30%;
	margin : auto;
	position : relative;
	z-index : 2;
	top : 40%;
}
#circleMenu {
	width : 200px;
	height : 200px;
	border-radius : 50%;
	background-color : red;
	z-index : 3;
	position : relative;
	left : 35%;
}
#left {
	width : auto;
	position : absolute;
	background-color : green;
	top : 90px;
	left : 100px;
}
#right {
	width : auto;
	position : absolute;
	background-color : teal;
	top : 90px;
	right : 100px;
}

<div class="overlay"></div>
<div class="kontainer-menu">
<button onclick="show()">Menu</button>
	<div id="circleMenu">
		<div id="left"> menu Left</div>
		<div id="right"> menu Right</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Answer 1

.overlay should be in double quotes

function show() {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);
    if ($("#circleMenu").hasClass("open") == true) {
        $("#circleMenu").removeClass("open");
        $("#left").css("left", "-100px");
        $("#right").css("right", "-100px");
    } else if ($("#circleMenu").hasClass("open") == false) {
        $("#circleMenu").addClass("open");
        $("#left").css("left", "100px");
        $("#right").css("right", "100px");
    }
}

----------------UPDATE----------

I updated the code above. You forgot to write px after 100 and -100 in if and else blocks.

------------ UPDATE 2 ------------

Just to show the simultaneous movement of both the divs, the left and the right, And to change the background overlay color according to my perceptions, I have updated your code a little. Please let me know if I have misinterpreted your requirements..

Have a look at it.

function show() {
  if ($("#circleMenu").hasClass("open") == true) {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);

    $("#circleMenu").removeClass("open");
    $("#left").css("left", "-100px");
    $("#right").css("right", "-100px");
  } else if ($("#circleMenu").hasClass("open") == false) {
    $(".overlay").css("z-index", 0);
    $(".overlay").css("opacity", 0);


    $("#circleMenu").addClass("open");
    $("#left").css("left", "100px");
    $("#right").css("right", "100px");
  }
}
$(".show").on("click", function() {
  show();
});

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0;
  z-index: -1;
  position: absolute;
  transition: all 1s;
}
.kontainer-menu {
  width: 50%;
  height: 30%;
  margin: auto;
  position: relative;
  z-index: 2;
  top: 40%;
}
#circleMenu {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
  z-index: 3;
  position: relative;
  left: 35%;
}
#left {
  width: auto;
  position: absolute;
  background-color: green;
  top: 90px;
  left: 100px;
  transition: all 1s;
}
#right {
  width: auto;
  position: absolute;
  background-color: teal;
  top: 90px;
  right: 100px;
  transition: all 1s;
}

<div class="overlay"></div>
<div class="kontainer-menu">
  <button onclick="show()">Menu</button>
  <div id="circleMenu">
    <div id="left">menu Left</div>
    <div id="right">menu Right</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Answer 2

Change your button to:

<button class="show">Menu</button>

Then in your jQuery use:

$(".show").on("click", function() {
  show();
});

Sets an on click handler for the button element. See: http://api.jquery.com/on/