JSFiddle - React, Tailwind, and code Playground

by brianrhea

HTML

<a class="sliderLinks" data-id="billing" href="#">Billing Reminders</a><br />
<a class="sliderLinks" data-id="collections" href="#">Collections</a><br />
<a class="sliderLinks" data-id="payments" href="#">Payments</a>
<br /><br />

<div id="defaultMessage">
Default Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="textMessages">
                     
<div class="hidden" id="billing">
Billing ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id ligula eget purus</div>
     
<div class="hidden" id="collections">
Collections Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
     
<div class="hidden" id="payments">
Payments orem ipsum dolor sit amet, consectetur adipiscing elit
</div>

</div>

CSS

#textMessages{
  display:none;   
 }
 
 .hidden{
  display: none;   
 }

.sliderLinks {
    font-size: 22px;
}

a:hover.sliderLinks {
     font-weight: bold;
 }

.hoverBold {
     font-weight: bold;
 }

JavaScript

$(document).ready(function(){

     var i = 0;
     var links = $(".sliderLinks");
     var len = links.length;
     var interval;    
    
     function hoverIn(target, clear) {
        if (clear) {
            $(".hidden").hide();
            clearInterval(interval);
            interval = null;
        }
        var id = $(target).data("id");
        if(id) {
           $("#" + id).fadeIn(500);
        }
        $("#textMessages").fadeIn(500);
        $("#defaultMessage").hide();
    }    
    
    function hoverOut(start) {
        $("#textMessages").hide();
        $(".hidden").hide();
        $("#defaultMessage").fadeIn(500);
        if (start) {
            startCycle();
        }
    }   
    
    links.hover(
        function(){ hoverIn(this, true); },
        function(){ hoverOut(true); }
    );
    
    function startCycle() {
        i = 0;
        clearInterval(interval);
        interval = setInterval(function () {
            hoverOut();
            hoverIn(links[i]);
            var prev = (i-1 < 0) ? len-1 : i-1;
            $(links[i]).addClass('hoverBold');
            $(links[prev]).removeClass('hoverBold');
            if (++i >= len) {
              i = 0;
            }
        }, 1000);
    }
    
    startCycle();
  });