JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

click number 1st, then use prev/next to traverse through elements

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<div class="container">
    <div>box 1</div>
    <div>box 2</div>
    <div>box 3</div>
</div>

<span class="prev">prev</span> <span class="next">next</span>

CSS

.container div {
    display: none;
}

.container div.active {
    display: block;
}

JavaScript

var $links = $("ul").children();
var $divs = $(".container").children();
var $next = $(".next");
var $prev = $(".prev");

var numOfItems = $divs.length;
var index = 0;

$links.on("click", function(e){
    var $this = $(this);
    index = $this.index();
    
    $divs.removeClass("active");
    $divs.eq(index).addClass("active");
});

$next.on("click", function(e){
    var $this = $(this);
    
    $divs.removeClass("active");
    index++;
    $divs.eq(index).addClass("active");
});

$prev.on("click", function(e){
    var $this = $(this);
    
    $divs.removeClass("active");
    index--;
    $divs.eq(index).addClass("active");
});