Trying to slide tabs horizontally when "next tab" button is clicked.

Trying to slide tabs horizontally when "next tab" button is clicked.

Hi,

I have the following code structure:
  1. <img id="#nextTab" src="..." />
  2. <div style="width:700px;overflow:hidden">
  3.   <div id="tabs" style="width:2000px">
  4.     <ul>
  5.       <li>Tab 1</li>
  6.       <li>Tab 2</li>
  7.       <li>...</li>
  8.       <li>Tab N</li>
  9.     </ul>
  10.   </div>
  11. </div
As the total width of the tabs is larger than the screen, the newly selected tab should slide to the left when the "nextTab" element is clicked.

The following code succeeds in moving the set of tabs 300px left, but when trying to set the offset dynamically, it fails (see the last line which was commented out). Certainly some syntax error with the quotes ...
Who can help? Thanks.

  1.   jQuery(document).ready(function(){
  2.     jQuery("#nextTab").click( function() {
  3.       var api = jQuery("ul.tabs").data("tabs");
  4.       var storeLeft = api.getCurrentTab().position().left;
  5.       api.next();
  6.       alert(storeLeft);
  7.       alert(api.getCurrentTab().position().left);
  8.       jQuery("#tabs").css({'position':'relative','left':'-300px'});
  9.       //jQuery("#tabs").css({'position':'relative','left':'+='+storeLeft-api.getCurrentTab().position().left+'px'});
  10.  
  11.     });
  12.     jQuery("ul.tabs").tabs(".pane");
  13.    
  14.     });
   
N.B. The final code should also slightly different as the storeLeft variable should store the left position of the very first tab. Hence, the "api" and "storeLeft" variables will probably be moved outside the .click() function.