JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div id="topTen">
    <div>
        <h2>Top ten Shoes</h2>
        <ol>
            <li>Red Shoes</li>
            <li>Blue Shoes</li>
            <li>Green Shoes</li>
        </ol>
    </div>
    <div>
        <h2>Top ten Shirts</h2>
        <ol>
            <li>Blue Shirts</li>
            <li>Green Shirts</li>
            <li>Red Shoes</li>
        </ol>
    </div>
    <div>
        <h2>Top ten Ties</h2>
        <ol>
            <li>Red Ties</li>
            <li>Blue Ties</li>
            <li>Green Ties</li>
        </ol>
    </div>
</div>

JavaScript

$(document).ready(function() {
    $("#topTen>div").hide();

    function doFade() {
        $("#topTen>div:visible").fadeOut("slow", function() {
            ($(this).next().length == 0 ? $("#topTen>div:first") : $(this).next()).fadeIn("slow", function() {
                setTimeout(doFade, 4000);
            });
        });
    }
    $("#topTen>div:first").fadeIn("slow", function() {
        setTimeout(doFade, 4000);
    });
});