Data tabs prev/next button

Question

I have some tabs.. and arrows next/prev. I would like to switch tabs with arrows. But I'm not sure how to do it. I have no idea how to do this. I have fixed numbers 1,2,3,4..

 $("[data-tabs][data-show]").on("click", function() { var name = $(this).attr("data-tabs"); var id = $(this).attr("data-show"); var tabs = $("[data-tabs=\"" + name + "\"][data-id]"); tabs.removeClass("active"); tabs.filter("[data-id=\"" + id + "\"]").addClass("active"); var buttons = $("[data-tabs=\"" + name + "\"][data-show]"); buttons.removeClass("active"); buttons.filter("[data-show=\"" + id + "\"]").addClass("active"); var prev = $("[data-tabs-prev]"); var next = $("[data-tabs-next]"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tabs__prev" data-tabs-prev>PREV</div> <div class="tabs__next" data-tabs-next>NEXT</div> <ul class="tabs"> <li class="tabs__item active" data-tabs="demo" data-show="1">Test1</li> <li class="tabs__item" data-tabs="demo" data-show="2">Test 2</li> <li class="tabs__item" data-tabs="demo" data-show="3">Test 3</li> <li class="tabs__item" data-tabs="demo" data-show="4">Test 4</li> <li class="tabs__item" data-tabs="demo" data-show="5">Test 5</li> </ul> <div class="show"> <div data-tabs="demo" data-id="1" class="show__item active">Content</div> <div data-tabs="demo" data-id="2" class="show__item active">Content</div> <div data-tabs="demo" data-id="3" class="show__item active">Content</div> <div data-tabs="demo" data-id="4" class="show__item active">Content</div> <div data-tabs="demo" data-id="5" class="show__item active">Content</div> </div>

Answer 1

 let index = 1; $("[data-tabs][data-show]").on("click", function () { var name = $(this).attr("data-tabs"); var id = $(this).attr("data-show"); controlTab(name, id) }); $("[data-tabs-prev]").on("click", function () { index = index > 1? index - 1: index controlTab('demo', index) }); $("[data-tabs-next]").on("click", function () { index = index < $("[data-tabs=demo][data-show]").length? index + 1: index controlTab('demo', index) }); function controlTab(name, id) { index = +id var tabs = $("[data-tabs=\"" + name + "\"][data-id]"); tabs.removeClass("active"); tabs.filter("[data-id=\"" + id + "\"]").addClass("active"); var buttons = $("[data-tabs=\"" + name + "\"][data-show]"); buttons.removeClass("active"); buttons.filter("[data-show=\"" + id + "\"]").addClass("active"); }

 .tabs.active { color:red; } li { list-style:none; padding:0 10px; cursor:pointer; }.show.show__item { display:none; }.show.active { display:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tabs__prev" data-tabs-prev>PREV</div> <div class="tabs__next" data-tabs-next>NEXT</div> <ul class="tabs"> <li class="tabs__item active" data-tabs="demo" data-show="1">Test1</li> <li class="tabs__item" data-tabs="demo" data-show="2">Test 2</li> <li class="tabs__item" data-tabs="demo" data-show="3">Test 3</li> <li class="tabs__item" data-tabs="demo" data-show="4">Test 4</li> <li class="tabs__item" data-tabs="demo" data-show="5">Test 5</li> </ul> <div class="show"> <div data-tabs="demo" data-id="1" class="show__item active">Content2</div> <div data-tabs="demo" data-id="2" class="show__item ">Content23</div> <div data-tabs="demo" data-id="3" class="show__item ">Content245453</div> <div data-tabs="demo" data-id="4" class="show__item ">Content4534</div> <div data-tabs="demo" data-id="5" class="show__item ">Content45</div> </div>