JSFiddle - React, Tailwind, and code Playground

by yosafatade

HTML

<link rel="stylesheet" href="http://960.gs/css/reset.css">
<link rel="stylesheet" href="http://960.gs/css/text.css">
<link rel="stylesheet" href="http://960.gs/css/960.css">
<div class="container_12">
    <div id="sideLeft" class="grid_4">
         <h1>My Panel</h1>
        <ul>
            <li>item #1</li>
            <li>item #2</li>
            <li>item #3</li>
            <li>item #4</li>
        </ul>
    </div>
    <div id="sideRight" class="grid_8">The left column has a width of 175px. Later in the coding stage, we will modify the margin-left of the inner div#panel to set it to -175px, and since div#colleft has overflow:hidden, it will dissapear. Notice that showPanel has display set to none and its width set to 0px. Of course, when the panel hides, the showPanel button will be displayed through or jQuery code. Finally, notice that colright, the one that will be expanded, has a margin-left of 200px. Later through our code, this margin will be reduced to 50px to expand the box width 150px more.</div>
    <button id="oioi" class="grid_12">The Button</button>
    <button id="oioi2" class="grid_12">The Button</button>
</div>

CSS

button {
    background: black;
    display: block;
    height: 20px;
}

#sideLeft{
    display: none;
}

#oioi2{
    background: blue;
}

JavaScript

$('#oioi').click(function () {
    $('#sideLeft').show("slide", {
            direction: "left"
        }, 1000);
});

$('#oioi2').click(function () {
    $('#sideLeft').hide("slide", {
            direction: "left"
        }, 1000);
});