JSFiddle - React, Tailwind, and code Playground
HTML
<div class="plink" id="toggleP"><b>[CLICK ME] Show/hide P</b></div>
<div class="g">TEST</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div class="g">ok</div>
<div...
JavaScript
function eachAsync(collection, iterator, callback) {
var iterate = function(i) {
setTimeout(function() {
iterator(collection[i]);
if (i < collection.length) {
iterate(i + 1);
} else {
callback();
}
}, 0);
};
iterate(0);
}
$(document).ready(function () {
$('#toggleP').click(function() {
$('#toggleP').html("Working...");
eachAsync($('div.g'), function(el) {
$(el).toggle();
}, function() {
$('#toggleP').html("Show/hide P");
});
});
});