JSFiddle - React, Tailwind, and code Playground

by stchangg

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container">
    <div class="row holder">
        <div id="main" class="span8"></div>
        <div id="extra"></div>
    </div>
</div>


<div class="container-fluid" id="sidebar-container">
    <div class="row holder">
        <div id="sidebar"></div>
    </div>
</div>

CSS

.holder {
    position: absolute;
    top: 40px;
    bottom: 10px;
}

#sidebar-container {
    padding: 0;
}

#main, #extra, #sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;    
    background: #eee;
}

#main {
    padding: 20px;
    overflow-y: scroll;
}

#extra {
    padding: 10px;
}

#sidebar {
    padding: 10px;
}

#extra.collapsed {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#extra.expanded {
    border-radius: 10px;
}

.node h1 {
    margin-bottom: 20px;
}

.video {
    height: 400px;
    width: 100%;
    background: black;
    margin: 0px auto;
}

.node {
    width: 100%;
    margin-bottom: 600px;
}

JavaScript

var main = $("#main");
var extra = $("#extra");
var sidebar = $("#sidebar");

var text = "<h1>Title</h1><div class='video'></div>";

var qtextCollapsed = "<h1>Q&A</h1>";
var qtextExpanded = "<h1>Questions & Answers</h1>";

for (var i=0; i<4; i++) {
    var el = $("<div>").addClass("node").html(text);
    main.append(el);
}

extra.html(qtextCollapsed);

var mainClassCollapsed = "offset3"; // span8
var extraClassCollapsed = "span1 offset11 collapsed";

var mainClassExpanded = ""; // span8
var extraClassExpanded = "span4 offset8 expanded";

var sidebarClassCollapsed = "span1";
var sidebarClassExpanded = "span3";

collapseExtra(0);

var speed = 400;
extra.toggle(function () {
    expandExtra(speed);
}, function () {
    collapseExtra(speed);
});

function expandExtra (speed) {
    main.switchClass(mainClassCollapsed, mainClassExpanded, speed);
    extra.switchClass(extraClassCollapsed, extraClassExpanded, speed);
    extra.html(qtextExpanded);
}

function collapseExtra (speed) {
    main.switchClass(mainClassExpanded, mainClassCollapsed, speed);
    extra.switchClass(extraClassExpanded, extraClassCollapsed, speed);
    extra.html(qtextCollapsed);
}

collapseSidebar(0);

sidebar.toggle(function () {
    expandSidebar(speed);
}, function () {
    collapseSidebar(speed);
});

function expandSidebar (speed) {
    sidebar.switchClass(sidebarClassCollapsed, sidebarClassExpanded, speed);
}

function collapseSidebar (speed) {
    sidebar.switchClass(sidebarClassExpanded, sidebarClassCollapsed, speed);
}