Question

I have a problem when you press the red button the animation start and then if you click in blue button it doesn’t work but in double click it works

Here is JSFiddle

Answer 1

The reason you are having the problem is because there is no shared state between the open and close buttons. So when you click on the close button and it closes the container, open still thinks the container is still open, requiring two clicks to produce the desired behaviour.

You could use the following code, although it doesn’t use toggle (new jsFiddle):

<div class="main">
    <a class="open"></a>
    <div class="container">
        <a class="close"></a>
    </div>
    <div id="containerState" style="display:none;">opened</div>
</div>

 

$('.open').click(
    function () {
        if ($('#containerState').text() == 'opened')
            CloseContainer();
        else if ($('#containerState').text() == 'closed')
            OpenContainer();
    });

$('.close').click(
    function () {
        CloseContainer();
    });


function OpenContainer()
{
    $('.container').animate({
        right:"0px"
    }, 500);
    $('.open').animate({
        right:"300px"
    }, 500);

    $('#containerState').text('opened');
}

function CloseContainer()
{
    $('.container').animate({
        right:"-300px"
    }, 500);
    $('.open').animate({
        right:"0px"
    }, 500);

    $('#containerState').text('closed');
}