JSFiddle - React, Tailwind, and code Playground

by Dylan Schadeck

HTML

<ul class="simple">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>
<hr />
<ul class="animated">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

JavaScript

$('.simple li').click(function() {
    var $this = $(this);
    $this.insertAfter($this.siblings(':eq(0)'));
});

$('.animated li').click(function() {
    var $this = $(this),
        callback = function() {
            $this.insertAfter($this.siblings(':eq(0)'));
        };
    $this.slideUp(500, callback).slideDown(500);
});