JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<ul>
<li class="current"><a href="javascript:void(0);">One</a></li>
<li><a href="javascript:void(0);">Two</a></li>
<li><a href="javascript:void(0);">Three</a></li>
<li><a href="javascript:void(0);">Four</a></li>
<li><a href="javascript:void(0);">Five</a></li>
<li><a href="javascript:void(0);">Six</a></li>
<li><a href="javascript:void(0);">Seven</a></li>
</ul>
</div>

<div id="slideShow">
<ul>
<li id="0" style="display:block" class="mainList">
    <span>One</span>
    <ul>
    <li id="0_1" class="slideshow_item" style="display:block">1</li>
    <li id="0_2"  class="slideshow_item" style="display:none">2</li>
    <li id="0_3"  class="slideshow_item" style="display:none">3</li>
    </ul>
</li>
<li id="1"  style="display:none" class="mainList">
    <span>Two</span>
    <ul>
    <li id="1_1" class="slideshow_item" style="display:none">1</li>
    <li id="1_2" class="slideshow_item" style="display:none">2</li>
    </ul>
</li>
<li id="2"  class="mainList"  style="display:none">
    <span>Three</span>
    <ul>
       <li  id="2_1" class="slideshow_item" style="display:none">1</li>
    </ul>
</li>
<li id="3" class="mainList" style="display:none">
    <span>Four</span>
    <ul>
    <li id="3_1" class="slideshow_item" style="display:none">1</li>
    <li id="3_2" class="slideshow_item" style="display:none">2</li>
    </ul>
</li>
<li id="4" class="mainList" style="display:none">
    <span>Five</span>
    <ul>
    <li id="4_1" class="slideshow_item" style="display:none">1</li>
    <li id="4_2" class="slideshow_item" style="display:none">2</li>
    <li id="4_3" class="slideshow_item" style="display:none">3</li>
    </ul>
</li>
<li id="5" class="mainList" style="display:none">
    <span>Six</span>
    <ul>
    <li id="5_1" class="slideshow_item" style="display:none">1</li>
    </ul>
</li>
<li id="6" class="mainList" style="display:none">
    <span>Seven</span>
    <ul>
    <li id="6_1" class="slideshow_item" style="display:none">1</li>
    <li id="6_2"...

CSS

.menu {margin:0px; padding:0px;}
.menu ul {margin:0px; padding:0px; overflow:hidden;}
.menu ul li {list-style-type:none; float:left;}
.menu ul li a { padding:5px 10px 5px 10px; display:block; text-decoration:none; color:#333333;}
.menu ul li a:hover {background:#0099FF; color:#fff;}
#slideShow ul {margin:10px 0px 0px 10px; padding:0px;}
#slideShow ul li {list-style-type:none;}
.current a {background:#0099FF !important; color:#fff !important;}

JavaScript

$(document).ready(function(e) {
    var allMenifest = $(".mainList ul li");
    var init = 0;
    
    $("#prev").click(function(e) {
        showme("prev");
    });
    
    $("#next").click(function(e) {
        showme("next");
    });
    

    function showme(e){
        allMenifest.eq(init).parent("ul").parent(".mainList").hide();
        allMenifest.eq(init).hide();
            
        if(e == "next"){
            init++;        
            }else{
            init--;    
            }
            
            if(init <= 0){init = allMenifest.length;}else if(init >= allMenifest.length){init = 0;}
            
            allMenifest.eq(init).parent("ul").parent(".mainList").show();
            allMenifest.eq(init).show();
    }
    
});