JSFiddle - React, Tailwind, and code Playground

by MrTimon

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<ul>
	<li></li>
	<li></li>
	<li class="middle"> </li>
	<li class="large"></li>
	<li class="middle"></li>
	<li></li>
	<li></li>
</ul>
<div style="clear:both"></div>
<div>
<button id="next">Next</button>
<button id="prev">Prev</button>
</div>

CSS

ul{
width:100%
display: block;
list-style: none;
}

ul li{
float: left;
display: block;
background: darkred;
width: 50px;
height: 50px;
transition: width 1s linear, height 1s linear;

}

li.large {
width: 150px;
height: 150px;
background: yellow;
}

li.middle {
width: 100px;
height: 100px;
background: green;
}

JavaScript

$(document).ready(function() {
	$('#next').click(function() {
  		var $large = $('ul li.large');
      $large.next().next().removeClass('large middle').addClass('middle');
      $large.next().removeClass('large middle').addClass('large');
      $large.removeClass('large middle').addClass('middle');
      $large.prev().removeClass('large middle');
  });
  $('#prev').click(function() {
  		var $large = $('ul li.large');
      $large.prev().prev().removeClass('large middle').addClass('middle');
      $large.prev().removeClass('large middle').addClass('large');
      $large.removeClass('large middle').addClass('middle');
      $large.next().removeClass('large middle');
  });
  
});