JSFiddle - React, Tailwind, and code Playground

by VanessaKing

HTML

<div class='container'>
    <div id="" class="square"></div>
    <div class="side"><img src=""/></div>
    
    <div class="side"><img src="" height="100%" width="auto"/></div>
</div>

CSS

/* CSS Document */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
	{
    background: #a5a5a5;
    border: 0 none;
    font-size: 100%;
    font-style: normal;
    font-weight: inherit;
    margin: 0;
	padding: 0;
	outline: 0 none;
    vertical-align: baseline;
	text-decoration: none;
}

html, body { height:100%; }
.container { 
    font-size:0; 
    white-space: nowrap; 
    height:100%; 
    overflow:hidden;
}

/* PICTURES */
.side {
    width:50%;
    height:100%;
    display:inline-block;
    overflow:hidden;
    background:#fff;
}
	
/* NAVIGATION ARROWS */
.square {
	position:relative;
	background:#FF9F8C; 
	width:40px;
	height:40px;
	cursor:pointer;
	z-index:1;
    margin:auto;
    top:48%;
    display:block;
    border:0;
}
#squareleft {
	left:30px;
	top:45%;
}
#squareright {
	right:30px;
	top:45%
}

JavaScript

$('.square').click(function() {
    if(!$(this).hasClass("active")) {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $('.side').stop().animate({"width":"0%"});
        $(this).nextAll(".side").stop().animate({ "width":"100%"});
    } else {
        $(this).removeClass("active");
        $(".side").stop().animate({"width":"50%"});
    }
});