Animate window in and out jQuery

Question

I created a toggle switch in jQuery. If you click on a marker, a sidebar is sliding inside the screen, and when you click the same marker, it slides back. But, I have multiple markers on my screen, and if you click another marker, the animation continues to slide inside, so the sidebar is getting bigger. What I want is that when you click any marker, that the sidebar is staying the same size, but I cannot achieve it with what I tried myself. The code:

   google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);

                if(windowOpen)
                {

                    sidebar.animate({ 
                        width: "-=300px" 
                    }, 500, function()
                    {
                        console.log('complete');
                    });


                 windowOpen = false;

                }
                else
                {
                    sidebar.animate({ 
                        width: "+=300px" 
                    }, 500, function()
                    {



                    });

                    windowOpen = true;
                }



              });

Can anyone point me in the right direction?

Many thanks!

Answer 1

Looks like you haven't defined windowOpen outside of the eventHandler. Thus, on every click windowOpen is undefined leading to your else code being executed. Try this:

var windowOpen = false;

google.maps.event.addListener(marker, 'click', function() {
  // your code
}