JSFiddle - React, Tailwind, and code Playground

by aanred

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="box">
    <div class="slide slide-one">
    </div>
    <div class="slide slide-two">
    </div>
</div>

CSS

.box {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
}
.slide {
    width: 100%;
    height: 100%;
    float: left;
}
.slide-one {
    background: #16a085;
}
.slide-two {
    background: #e67e22;
}

JavaScript

$('.slide-one').click(function(){
    $(this).animate({width:'toggle'}, 350);
});