JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<a href="#" id="link">click me to fade in</a>

CSS

#div1 {
    height:30px;
    width:30px;
    background:green;
    display:none;
}
#div2 {
    height:30px;
    width:30px;
    background:red;
    display:none;
}
#div3 {
    height:30px;
    width:30px;
    background:black;
    display:none;
}
#div4 {
    height:30px;
    width:30px;
    background:grey;
    display:none;
}

JavaScript

var i = 0;
var testimonialElements = $('div');

$( "#link" ).click(function() {


$('#div' + i).fadeIn('fast', function () {
    console.log('#div' + i);
    for (i = 2; i < testimonialElements.length; i++) {
        var element = testimonialElements.eq(i);
        $('#div' + i).fadeIn(1000, function () {});
    }
});
    
});