JSFiddle - React, Tailwind, and code Playground

by David Thomas

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);
        $('<button 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();
                });