manipulating css element with 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 :

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

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

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..