a/20323054/1636522

by wared

HTML

<div id="wrap">
    <div id="#c01" style="display:none">1</div>
    <div id="#c02" style="display:none">2</div>
    <div id="#c03" style="display:none">3</div>
    <div id="#c04" style="display:none">4</div>
</div>

CSS

#wrap {
    float: left;
    border: 20px solid lightblue;
    padding: 5px;
}
#wrap div {
    width: 100px;
    padding: 10px 0;
    text-align: center;
    background: yellow;
    font-size: 16px;
    font-family: Arial;
    border: 5px solid white;
}

JavaScript

var children = $('#wrap div'),
    dir = 1;
$('#wrap').one('click', function click() {
    var idx;
    switch (dir) {
        case 1: idx = 0; break;
        case -1: idx = children.length - 1; break;
    }
    setTimeout(function fn() {
        children.eq(idx).toggle();
        idx += dir;
        if (idx > -1 && idx < children.length) {
            setTimeout(fn, idx * 200);
        } else {
            dir = -dir;
            $('#wrap').one('click', click);
        }
    }, idx * 200);
});