JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="content">
    <div class="content-left-column" id="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" id="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

function Maximalize() {
    addClass(document.getElementById("right-column-wrapper"), "open");
    addClass(document.getElementById("content-left-column"), "closed");
}

function Colapse() {
    removeClass(document.getElementById("right-column-wrapper"), "open");
    removeClass(document.getElementById("content-left-column"), "closed");
}

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function getElementsByClassName(classname, node) {
    if (!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for (var i = 0, j = els.length; i < j; i++) {
        if (re.test(els[i].className)) {
            a.push(els[i]);
        }
    }
    return a;
}
getElementsByClassName('open-button')[0].onclick = Maximalize;
getElementsByClassName('close-button')[0].onclick = Colapse;