JSFiddle - React, Tailwind, and code Playground

by bjelline

HTML

<div id="textContainer">
    <div class="t1">something</div>
    <div class="t2">third text replacement</div>
    <div class="t3">now the next item</div>
    <div class="t4">new text here</div>
</div>
<hr />
<div id="left">Left</div>
<div id="right">Right</div>
<hr />
<div class="elsewhere">
    <div class="t1">text here</div>
    <div class="t2">more here</div>
    <div class="t3">something new here</div>
    <div class="t4">something else here</div>    
</div>

JavaScript

var cursor = 1;
var max = $('#textContainer div').length;

function redisplay() {
    $('#textContainer div').hide();
    $('#textContainer div.t'+cursor).show();
    $('.elsewhere div').hide();
    $('.elsewhere div.t'+cursor).show();
}

$('#left').on('click', function (){
   cursor--;
   if(cursor < 1) cursor = max ;
   redisplay();
});

$('#right').on('click', function (){
   cursor++;
   if(cursor > max) cursor = 1;     
   redisplay();
});

redisplay();