JSFiddle - React, Tailwind, and code Playground
HTML
<span class="div1">
<b>Mats</b><br>Hey</span>
<span class="div2"><b>Sven</b><br>Hey</span>
<span class="div3">Hoe is het?</span>
<button>Tap</button>
CSS
html, body {
min-width: 100%;
min-height: 100%;
}
span {
min-width: 100%;
min-height: 100%;
display: none;
margin: 0px 0px 00px 0px;
}
.div1 {
background: blue;
max-height: 4em;
}
.div2 {
background: green;
max-height: 4em;
}
.div3 {
background: orange;
max-height: 4em;
}
JavaScript
var count = 0,
$allSpans = $('.div1, .div2, .div3');
$('button').click(function() {
if (count < $allSpans.length) {
$allSpans.eq(count).show('slow');
count++;
}
});