js animation not working on first click

Question

I'm a noob when it comes to javascript. I basically edited a code that someone helped me out with earlier. And it works exactly how I want it. It just doesn't animate on the first click. But after the first click it works fine.

Heres the js code:

$(function() {
"use strict";

var isOpen = true;

$('#box').on('click', function() {
if (isOpen) {
  animate(false);
    isOpen = false;
    } else {
    animate(true);
    isOpen = true;
    }
});
});

function animate(action) {
    if (action) {
    $('#left-div').animate({ left: '0' }, 600);
    $('#right-div').animate({ left:'30vw'}, 600);
        $('#close').hide();
    $('#open').show();
} else {
    $('#left-div').animate({ left: '0' }, 600);
        $('#right-div').animate({ left:'0' }, 600);
        $('#close').show();
    $('#open').hide();
}
}

Here's the Demo

Answer 1

Check this ...

  $(function() { "use strict"; var isOpen = true; $('#box').on('click', function() { if (isOpen) { animate(false); isOpen = false; } else { animate(true); isOpen = true; } }); }); function animate(action) { if (action) { $('#left-div').animate({ width: '30vw' }, 600); $('#close').hide(); $('#open').show(); } else { $('#left-div').animate({ width: '0' }, 600); $('#close').show(); $('#open').hide(); } } 

 * { padding: 0; margin: 0; } #post-wrapper{ width: 100vw; } #post-wrapper > *{ display: inline-block; } #left-div { width: 30vw; height: 100vh; background: green; } #left-content{ color: white; padding: 5px 10px 0px 10px; width: 90vw; } #right-div{ display: inline-block; position: absolute; top: 0vw; width: 100vw; height: 100vh; background: navy; } #right-content { color: white; margin: 5px 0px 0px 50px; } #close{ text-align: center; position: absolute; width: 20px; height: 20px; margin-top: 5px; margin-left: 10px; background: red; cursor: pointer; } #open { text-align: center; position: absolute; width: 20px; height: 20px; margin-top: 5px; margin-left: 10px; background: red; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="post-wrapper"> <div id="left-div"> <div id="left-content"> <p>Text</p> </div> </div> <div id="right-div"> <div id="box"> <div id="close">+</div> <div id="open">X</div> </div> <div id="right-content"> <p>More text </p> </div> </div> </div>