JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<h1>Title</h1>
<ul class="list-unstyled panel-group" id="test">
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title1</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title2</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title3</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title4</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel panel-default">
        <h4 class="panel-heading panel-title">Title5</h4>
        <p class="panel-body collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias, asperiores aspernatur cupiditate dicta eaque impedit ipsum itaque laboriosam modi officiis perferendis provident quam quisquam, quod saepe sequi similique ut.</p>
    </li>
    <li class="panel...

CSS

.collapse {
    display: none;
}
ul,li,h4,p{
    margin:0;
    padding:0;
    padding:10px;
}

JavaScript

function animateContents(){
    var promises = $('#test li').map(function(i){
        var a = this, 
            dfd = $.Deferred();
        
        console.log(i);
           
        $(a).find('p')
                .delay(i*2500)
                .slideDown('slow', function(){
                    $(this).addClass('in');
                })
                .delay(1000)
                .slideUp('slow', function(){
                    $(this).removeClass('in');
                    dfd.resolve();
                });
        
        return dfd.promise();
    }).get();
    
    console.log(promises);
    return $.when.apply($, promises);
}

(function run() {
    animateContents().done(run);
}());