Switching tabs, with previous/next arrows, using jQuery You can find a JSFiddle demo of my tabs.

The jQuery tabs work well as intended. However I was asked to include arrows alongside the tabs so readers could navigate through tabs using them instead of the tab titles alone.

So I used:

$("li.tab").click( function() {
  $('#div1').removeClass( 'hide' );
  $('#div2').removeClass( 'hide' );
  $('#div3').removeClass( 'hide' );
  $('#div1').removeClass( 'show' );
  $('#div2').removeClass( 'show' );
  $('#div3').removeClass( 'show' );
} );
$("a.rightarrow1").click( function() {
  $('#div1').addClass( 'hide' );
  $('#div2').addClass( 'show' );
  $('#div2').removeClass( 'hide' );
  $('#div3').addClass( 'hide' );
  $('li.tab2').addClass( 'current' );
  $('li.tab1').removeClass( 'current' );
  $('li.tab3').removeClass( 'current' );
} );
$("a.leftarrow1").click( function() {
  $('#div1').addClass( 'hide' );
  $('#div2').addClass( 'hide' );
  $('#div3').addClass( 'show' );
  $('#div3').removeClass( 'hide' );
  $('li.tab3').addClass( 'current' );
  $('li.tab2').removeClass( 'current' );
  $('li.tab1').removeClass( 'current' );
} );
$("a.rightarrow2").click( function() {
  $('#div1').addClass( 'hide' );
  $('#div2').addClass( 'hide' );
  $('#div3').addClass( 'show' );
  $('#div3').removeClass( 'hide' );
  $('li.tab3').addClass( 'current' );
  $('li.tab2').removeClass( 'current' );
  $('li.tab1').removeClass( 'current' );
} );
$("a.leftarrow2").click( function() {
  $('#div1').addClass( 'show' );
  $('#div1').removeClass( 'hide' );
  $('#div2').addClass( 'hide' );
  $('#div3').addClass( 'hide' );
  $('li.tab1').addClass( 'current' );
  $('li.tab2').removeClass( 'current' );
  $('li.tab3').removeClass( 'current' );
} );
$("a.rightarrow3").click( function() {
  $('#div1').addClass( 'show' );
  $('#div1').removeClass( 'hide' );
  $('#div2').addClass( 'hide' );
  $('#div3').addClass( 'hide' );
  $('li.tab1').addClass( 'current' );
  $('li.tab2').removeClass( 'current' );
  $('li.tab3').removeClass( 'current' );
} );
$("a.leftarrow3").click( function() {
  $('#div1').addClass( 'hide' );
  $('#div2').addClass( 'show' );
  $('#div2').removeClass( 'hide' );
  $('#div3').addClass( 'hide' );
  $('li.tab2').addClass( 'current' );
  $('li.tab3').removeClass( 'current' );
  $('li.tab1').removeClass( 'current' );
} );


It's long, but it works. But can it be made more elegant?
Firstly, the obvious:

Both .addClass and .removeClass can deal with multiple classes at once, so wherever you have something like

  $('#div1').removeClass( 'hide' );
  ...
  $('#div1').removeClass( 'show' );
  ...


you can instead write

  $('#div1').removeClass(['hide', 'show']);




You have a few places where you're just removing the same set of classes from a series of elements. You might consider crafting your selector differently to select them all at once, or at the very least define an intermediate function so that you can write something like

stripClasses(["#div1", "#div2", ...], ['hide', 'show']);




All of this actually seems to be pointless, because if the idea is just to navigate through tabs with arrow buttons, you can use the built-in selected option, both to find out which is currently active and to change it.

The fundamental reason you've got so much complexity in that code block is that you seem to have decided to manually manage all the class changes that go along with moving from one tab to another. You don't actually need to do that.

Something like

$("#tabs").tabs();

$(".left-arrow").click(function () { changeTab("#tabs", -1)});
$(".right-arrow").click(function () { changeTab("#tabs", +1)});

function changeTab(elem, by) {
    var sel = $(elem).tabs("option", "selected");
    var newTab = bounded(0, sel+by, 3);
    $(elem).tabs("option", "selected", newTab);
}

function bounded(lower, num, upper) {
    return Math.min(upper, Math.max(lower, num));
}


should work fine (change the newTab expression to get different behavior, like wrapping, out of it). Just be mindful of your local namespaces and styles.