JSFiddle - React, Tailwind, and code Playground

by hajpoj

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>

<div id=container class="row">
    <div id=one class=span5>
        One - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id urna ac turpis euismod rhoncus vitae nec felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nec ultricies ante. Maecenas quis metus et quam ultricies mattis et ac metus. Maecenas dignissim ultrices velit quis vestibulum. Mauris aliquet mollis diam, non consectetur velit facilisis at. Quisque pellentesque egestas sapien non pellentesque. Nulla facilisi. Sed ut porttitor felis. In aliquet nibh vel quam aliquam interdum. 
    </div>
    <div id=two class="span2 hide">
        Two -  One Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id urna ac turpis euismod rhoncus vitae nec felis. Cum sociis natoque penatibus et 
    </div>
    <div id=button>
        <a href=# class="btn">Click me</a>
    </div>
</div>

CSS

#container {
    position: relative;   
}

#one {
    background-color: skyblue;
}

#two {
    background-color: pink;
}

.hide {
    display: none;
}

#button {
    position: absolute;
    top: 200px;
    left:290px;
}

JavaScript

$(function() {
    $one = $('#one');
    $two = $('#two');
    $button = $('#button a');

    $button.click(function() {
        if ($one.hasClass('span5')) {
            $two.removeClass('hide');
            $one.removeClass('span5').addClass('span3');
        }
        else if ($one.hasClass('span3')) {
            $two.addClass('hide');
            $one.removeClass('span3').addClass('span5');
        }
    });

})