Help me fix the script, how to do it?

Question

JavaScript

Hello. There is such a structure: jsfiddle.net/mqf49o5h
The bottom line is this, the page is conditionally divided into 2 parts, left to right.
By clicking on the left side, the left block on which the click was made opens, and the right one narrows + a lighted "deck" appears on it, well, as if visually it would attract less attention.
When you click on an open block again, it closes, and the right block is stretched to its original state.
In general, when there was .hover in the script, everything worked as it should. But when I replaced it with .click, there was one problem.
If you click on the left block, it will open, and if you immediately press the right one without closing the left one, then the right one also opens, but the left one does not close and it turns out to be porridge.

It is necessary that if one block is open, and we want to open the one that is opposite to it, then the other one is closed.

I tried to describe as best I could. If it is not clear, I will try to paint more, but I hope the essence of the question is clear.

Answer 1

Use the if...else construct
If I understand correctly.
jsfiddle.net/mqf49o5h/1
will you finish it yourself?

Answer 2

I agree with the terrible approach, the trouble is in scripts and styles, it was enough to define open from the parents, left and right, and inherit the rest, and you add more to the internal open, close blocks and just got confused yourself. Everything is much simpler here, if you press left, the left block opens, and the right one disappears, if you press right, the right one opens, and the left one disappears, I think the point is conveyed.
PS Re-layout, as I described above, so that the class is 1 open - open, if there is nothing, closed, no need to fence bicycles. If it doesn't work out at all, write, I'll help.