JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul>				
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

CSS

ul{
    display: inline-block;
	vertical-align: middle;
    height: 300px;
}
li{
  position: relative;
  display: inline-block;
}

JavaScript

$('li').on('click', function(){
  	//if this is already the active li, do nothing
    if($(this).hasClass('active')){
    	return false;
    }
  
  	//else, remove other active
  	$('li.active').removeClass('active');
    //this one the active one
  	$(this).addClass('active');
    
		$('li').animate({ 'top': '0px' }, {"duration" : 300, "queue": false});
		$(this).animate({ 'top': '-5px' }, {"duration" : 300, "queue": false});
	});