JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div id="container">
<div id="row1" class="row"><div class="element a1"></div><div class="element a2"></div><div class="element a3"></div></div>
<div id="row1" class="row"><div class="element a1"></div><div class="element a2"></div><div class="element a3"></div></div>
<div id="row1" class="row"><div class="element a1"></div><div class="element a2"></div><div class="element a3"></div></div>
</div>

CSS

*{
	margin: 0px;
	padding: 0px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

#container{
	height: auto;
	width: 100%;
}
.row{
	height: 300px;
	width: 100%;
	margin-bottom: 4px;
}
.element{
	width:33.33%;
	height: 100%;
	float:left;
}

.a1{
	background-color: #F90;
}
.a2{
	background-color: #CC6;
}
.a3{
	background-color: #399;
}

JavaScript

$('div.element').click(function(){
			$(this).toggleClass('go');
			if($(this).hasClass('go')){
				$(this).stop().animate({'width':'100%'},{
				duration:1000,
				step:function(gox){
				  var width = gox < 100 ? (100 - gox) / 2 : 0;
                  $(this).siblings().css({
					  'border':'0px',
					  'width': width + "%"
					  }); 
				  }
				 })
				
			}else{
			$(this).parent('div.row').find('div.element').stop().animate({'width':'33.33%'},1000);
		};
	});