JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<section>
    <div class="item hidden-item">Первый элемент</div>
    <div class="item hidden-item">Второй элемент</div>
</section>
<section>
    <div class="item hidden-item">Первый элемент</div>
    <div class="item hidden-item">Второй элемент</div>
    <div class="item hidden-item">Третий элемент</div>
    <div class="item hidden-item">Четвертый элемент</div>
</section>
<section>
    <div class="item hidden-item">Первый элемент</div>
    <div class="item hidden-item">Второй элемент</div>
    <div class="item hidden-item">Третий элемент</div>
    <div class="item hidden-item">Четвертый элемент</div>
</section>
<input type="button" id="showNext" value="Показать по одному элементу в каждой секции"
/>

CSS

.hidden-item {
    display:none;
}
section {
    width: 170px;
    float: left;
}

JavaScript

$('#showNext').click(showOneElementInEachSection);
var sect=$('section');

function showOneElementInEachSection() {
    sect.each(function () {
        $(this).children('.hidden-item:not(:visible)').first().fadeIn(100);
    });
}