JSFiddle - React, Tailwind, and code Playground

by Boopathi Rajan

HTML

<div class="menu-widget" id="test">
    <h6>Forthcoming Events</h6>
    <div class="client active"> 
        <p><a href="#">News1</a></p>
        <p class="popular-date">18/01/2013</p>
    </div>
   <div class="client"> 
        <p><a href="#">News2</a></p>
        <p class="popular-date">18/01/2013</p>
    </div>
    <div class="client"> 
        <p><a href="#">News3</a></p>
        <p class="popular-date">18/01/2013</p>
    </div>
    <div class="client"> 
        <p><a href="#">News4</a></p>
        <p class="popular-date">18/01/2013</p>
    </div>
    <div class="client"> 
        <p><a href="#">News5</a></p>
        <p class="popular-date">18/01/2013</p>
    </div>
    <div class="client"> 
        <p><a href="#">News6</a></p>
        <p class="popular-date">18/01/2013</p>
    </div>
</div>

CSS

.client
{
    display:none;
}
.active
{
    display:block;
}

JavaScript

$( document ).ready(function() {
setInterval(function ()
            {
             var a=$('#test .client.active');  
             var b=$('#test .client').first();
                if (a.is(":last-child")) {
                    a.removeClass('active');
                    b.addClass('active');
                }
                else
                {
                a.removeClass('active').next().addClass('active');
                }
 }, 1000);
});