JSFiddle - React, Tailwind, and code Playground

by raymondralibi

HTML

<ul class="menu">
    <li class="selected">
        <div class="title">Title 1</div>
        <div class="content">content 1</div>
    </li>
    <li>
        <div class="title">Title 2</div>
        <div class="content">content 2</div>
    </li>
    <li>
        <div class="title">Title 3</div>
        <div class="content">content 3</div>
    </li>
</ul>

CSS

.menu{
    position: relative;
}
.title{
    width: 100px;
    height: 40px;
    background: silver;
    
}
.content{
    width: 400px;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 0px;
    background: brown;
    display: none;
}

.selected .title{
    background: orange;
}

.selected .content{
    display: block;
}

JavaScript

var nextPage = function(){
    var prev = $('.selected');
    if(prev.next().size() > 0){
       prev.next().addClass('selected'); 
    }
    else{
        $('.menu li:eq(0)').addClass('selected')
    }
    prev.removeClass('selected');
};

var nextInterval = setInterval( nextPage, 2000 );


$('.title, .content').hover(function(){
    clearInterval(nextInterval);
    $('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
}, function(){
    nextInterval = setInterval( nextPage, 2000 );
});