JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Slide Down!</h1>

<ul class="chapters">
    <li>Chapter 1</li>
    <li>Chapter 2</li>
    <li>Chapter 3</li>
    <li>Chapter 4</li>
    <li>Chapter 5</li>
    <li>Chapter 6</li>
</ul>

CSS

li { position: relative; }

ul {display: none; }

JavaScript

$(function() {
    $('h1').click(function() {
        $('.chapters').slideDown(500, function() {
            doSlide($('.chapters li:first'));
        });
    });

});


function doSlide(current) {
    $(current).animate({
        'left': '20px'
    }, function() {
        $(current).animate({
            'left': '0px'
        }, function() {
            doSlide($(current).next('li'));
        });
    });
}