JSFiddle - React, Tailwind, and code Playground

by Lindsey Suarez

HTML

<ul id="left-side">                     
    <li id="1">
        <div class="span">
            <span>span</span>
        </div>
    </li>                                           
    <li id="2">
        <div class="span">
            <span>span</span>
        </div>
    </li>                                                                
</ul>

CSS

li
{
    display: none;
}

JavaScript

$(function() {
    $("#left-side > li").bind('appear', function() { // bind a custom event
        $(this).fadeIn('slow', function() {
            $next = $(this).next();
            if ($next.length == 0) {
                $next = $(this).parent().children().first();
            }
        $(this).hide();
            $next.trigger('appear'); // recurse
        });
    })
    .first().trigger('appear'); // start the cascade
});