Slide two divs simultaneously

Question

I\'m trying to have two sections in the same page, a login-section and an app-section.

The idea is onLoginSubmit() to slide out to the left the login-section and sli

Answer 1

var $div1 = $('#login-section'), 
    $div2 = $('#app-section'),
    currentDiv = 'div1',
    $button = $('button');

$div2.hide();
$button.text('Toggle ' + currentDiv);

$(document).on('click', 'button', function (evt) {
    $div1.toggle('slide', {direction: 'right'}, 'slow');
    $div2.toggle('slide', {direction: 'left'}, 'slow');
    
    currentDiv = (currentDiv === 'div1') ? 'div2' : 'div1';
    $button.text('Toggle ' + currentDiv);
});

#login-section{
    width: 500px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 0px;
    left: 0px;
}

#app-section{
    width: 500px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 0px;
    left: 0px;
}

.clear {
    clear: both;
}

.container {
    width: 800px;
    position: relative;
    left: 100px;
    height: 100px;
}

some content here 

    

    


Toggle