JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="content">
    <div class="content-left-column">
        <a href="#" class="open-button">Open</a>
        <ul>
            <li>Item 1</li>
                        <li>Item 1</li>
                        <li>Item 1</li>
                        <li>Item 1</li>
                        <li>Item 1</li>
        </ul>    
    </div>
    <div class="content-right-column">
        <div class="right-column-wrapper">
        <a href="#" class="close-button">Close</a>
            <h2>Test</h2>
        </div>
    </div>
</div>

CSS

*{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.content{
    width: 80%;
    margin: 10% auto;
    background: #DDD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.content:before,
.content:after {
    content:"";
    display:table;
}

.content:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.content {
    *zoom:1;
}
.content-left-column{
    float: left;
    width: 30%;
    padding: 10px;
}
.content-left-column.closed .open-button{
    display: none;
}
.right-column-wrapper .close-button{
    display: none;
}
.right-column-wrapper.open .close-button{
    display: inline-block;
}
.content-right-column{
    float: right;
    width: 70%;
}
.right-column-wrapper{
    position: relative;
    background: #AAA;
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    padding: 10px;
    height: 300px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.right-column-wrapper.open{
    margin-left: -43%;
}

JavaScript

$(document).ready(function(){
    $('.open-button').click(function(){
        $('.right-column-wrapper').addClass('open');
        $('.content-left-column').addClass('closed');
        return false;
    });
    $('.close-button').click(function(){
        $('.right-column-wrapper').removeClass('open');
        $('.content-left-column').removeClass('closed');
        return false;
    });
});