Expand Div's 100%

Expand Div's 100%

by Avinashullal

HTML

<div id="wrapper">
    <div id="left-bg">
        <p>Left stuff</p>
    </div>
    <div id="right-bg">
        <p>Right stuff</p>
    </div>
</div>

CSS

#left-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #000;
    color: #fff;
    width: 50%;
    margin: 0;
}
#right-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #fff;
    color: 000;
    width: 50%;
    margin: 0;
}
.show {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -2.5em;
    width: 5em;
}

JavaScript

$('#left-bg, #right-bg').click(

function () {
    $(this).animate({
        'width': '100%'
    }, 600).siblings().animate({
        'width': '0'
    }, 600);

    if (!$('#btn').length) {
        $('<button id="btn" style="width:100px;" class="show">Show all</button>')
            .appendTo('#wrapper');
    }

});

$('.show').live('click',

function () {
    $('#left-bg').animate({
        'width': '50%'
    }, 600);
    $('#right-bg').animate({
        'width': '50%'
    }, 600);
    $(this).remove();
});