JSFiddle - React, Tailwind, and code Playground

by Raphael EEEEEE

HTML

<div id="group">
    <div class="current">one</div>
    <div>
         <div>
            Major content
         
         </div>
        </div>
    <div>three</div>
    <div>four</div>
</div>
<div id="next">next</div>
<div style="opacity:0.5" id="prev">prev</div>

CSS

#group div{
    display: none;
    height:40px;
    width:40px;
    border:1px solid #dedede;
}
#group div.current{
    display: block;
    border: 1px solid red;
}

JavaScript

function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    var index = $current.index();
    var newIndex = index+delta;
    // Range check the new index
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length) ? $items.length : newIndex); 
    if (newIndex != index){
        $current.removeClass('current');
        $current = $items.eq(newIndex).addClass('current');
        // Hide/show the next/prev
        // $("#prev").toggle(!$current.is($items.first()));   
        $("#prev").toggle(!$current.is($items.first()));   
        $("#next").toggle(!$current.is($items.last()));    
    }
}
$("#next").click(function () {
    updateItems(1);
});
$("#prev").click(function () {
    updateItems(-1);
});