Help JS Tabs and keyboard input

[kjSage 81]

My board is here.

 

So, I'm looking to make my site's skin more accessible, and part of this includes a new tab system. What I'm attempting to do (following this tutorial) and have mostly succeeded with is allowing people to tab through the tabs (hah) and use enter key to switch to a tab. I'm also looking to let the user use their arrow keys to automatically switch through the tabs as well. Tab/enter key works fine, but the second I try to use the arrow key method is where the code is going haywire.

 

If I use the arrow keys, it appears as if all the tabs are selected except the one that was navigated away from. The "focused" tab then becomes the last tab in the list, and the displayed content becomes the first tab. Needless to say it's not doing what it's supposed to, and I'm unsure of how to fix it. On the tutorial linked above, you can see that using the arrow keys automatically switches between the tabs as intended (or seems to, there's only two tabs there, compared to my 5-6)

 

Here's the js I'm using:

<script>
$(document).ready(function(){
  $("#sidebar li[role='tab']").click(function(){
	$("#sidebar li[role='tab']:not(this)").attr("aria-selected","false");
 	//$("#sidebar li[role='tab']").attr("tabindex","-1");
	$(this).attr("aria-selected","true");
	//$(this).attr("tabindex","0");
  var tabpanid= $(this).attr("aria-controls");
   var tabpan = $("#"+tabpanid);
$("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
$("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden");

tabpan.removeClass("hidden");
//tabpan.className = "panel";
tabpan.attr("aria-hidden","false");		
  });
  
  //This adds keyboard accessibility by adding the enter key to the basic click event.
  $("#sidebar li[role='tab']").keydown(function(ev) {
if (ev.which ==13) {
$(this).click();
}
}); 
 
  //This adds keyboard function that pressing an arrow left or arrow right from the tabs toggel the tabs. 
   $("#sidebar li[role='tab']").keydown(function(ev) {
if ((ev.which ==39)||(ev.which ==37))  {
var selected= $(this).attr("aria-selected");
if  (selected =="true"){
	$("#sidebar li[aria-selected='false']").attr("aria-selected","true").focus() ;
	$(this).attr("aria-selected","false");

  var tabpanid= $("#sidebar li[aria-selected='true']").attr("aria-controls");
   var tabpan = $("#"+tabpanid);
$("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
$("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden");

tabpan.attr("aria-hidden","false");
tabpan.removeClass("hidden");
//tabpan.className = "panel";


}
}
}); 

}); 
</script>

My tab css:

ul.controlList {
  list-style-type: none;
}

li[aria-selected='true'] {}

.panel[aria-hidden='true'] {
   display: none;
}
.panel[aria-hidden='false'] {
   display:block;
}

.hidden {display:none;}

.tablist {
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
    display: block;
    background-color: #080808;
    border-bottom: 2px solid #1e2733;
    border-top: 3px solid #252d34;
    text-align: center;
}

.tabs {
    background-color: transparent;
    padding: 5px;
}

.tab {
    display: inline;
    border-bottom: none;
    cursor: pointer;
    padding: 0 4px;
    font-family: georgia, times, serif;
    text-transform: uppercase;
    color: #5b656d;
}

.tab:focus, .tab:active, .tab[aria-selected='true'] {
    color: #374C5D;
    cursor:default;
}

.panel {
    background-color: #121212;
    padding: 5px;
    clear:both;
}

 

and the tab html:

<aside id="sidebar" role="complementary">

<ul class="tablist" role="tablist"> 
<li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Welcome</li> 
<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">Links</li> 
<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Chat</li> 
<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Staff</li> 
<li id="tab5" class="tab" aria-controls="panel5" role="tab" aria-selected="false" tabindex="0">©</li> 
</ul>
<div class="tabs">
<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false"><% WELCOME %></div> 
<div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true"><div class="sidelink"><% LINKS %></div></div>
<div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true"><% CHAT %></div>
<div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true"><% STAFF %></div>
<div id="panel5" class="panel" aria-labelledby="tab5" role="tabpanel" aria-hidden="true"><% CREDITS %></div>
</div>

</aside>

 

Any help with this would be appreciated!