JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div id="slider">
    <div id="label"></div>
    <div id="content">UPS!</div>
</div>

CSS

#slider {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #900;
}
#label {
    position: relative;
    float: right;
    background: #0C0;
    height: 200px;
    width: 25px;
    border-left: 1px solid #900;
    cursor: pointer;
}
#content {
    position: relative;
}

JavaScript

var slider = $('#slider');
var label = $('#label');

var cWidth = slider.width() - label.width(); // Ширина контента
slider.offset({top: 0, left: -cWidth}); // Прячем на эту ширину слайдер


label.toggle(
    function(){
        slider.animate({
            left: 0
        }, function(){
            label.css('background-color','#F00');
        });
    },
    function(){
        slider.animate({
            left: -cWidth
        }, function(){
            label.css('background-color','#0C0');
        });
    }
);