Css element manipulation with jquery

Question

I am still learning jquery.

I want to make the code, if I press the button, 2 divs will move at the same time, and the background will be overlaid by another div with an opacity 0.5

so when i press the menu button, the right and left menus move left and right respectively

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

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

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

SyntaxError: Unexpected token. Uncaught ReferenceError: show not defined

EDIT

thanks to @Tirthraj Barot, the error has now disappeared.

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

• change the opacity of the overlay background and the z-index so that it overlays the body

• simultaneously move 2 divs inside the circle

I expected it to be executed at the same time, but in fact it is not. the first time I clicked on the button, only the background is superimposed, the second time the background text disappears, 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 must 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 divs, left and right , and to change the color of the overlay background according to my perceptions, I updated your code a bit. Please let me know if I misinterpreted your requirements.

Look at this.

 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 the click handler for a button item. See: http://api.jquery.com/on/