Toggle Tab Content on Click Issues

Toggle Tab Content on Click Issues

Having some issues with my click/toggle function for my tabs. We are doing a "tabbed" navigation which also does "next/previous" to go back and fourth between the tabs. The tabs should open when clicked, and close when clicked - however they should remain open when you click on different tabs if you have one tab open already.

It seems really shotty and I think its because the function 1) I'm not great at jquery and 2) I think its getting confused when you click on a tab while a tab is already open. The page also seems to be dropping down to the "anchor" location. The link is here and my code for the tabs and next/prev and the toggle for the tab content is below

  1. $('#tab-buttons-container').easytabs();
  2. var $tabContainer = $('#tab-buttons-container'),
  3. $tabs = $tabContainer.data('easytabs').tabs,
  4. $tabPanels = $(".tab-buttons-panel")
  5. totalSize = $tabPanels.length;
  6. $tabPanels.each(function(i){
  7.  if (i != 0) {
  8. prev = i - 1;
  9. $(this).prepend("<a href='#' class='prev-tab btn success' rel='" + prev + "'>&laquo; Prev Page</a>");
  10.  } else {
  11. $(this).prepend("<span class='prev-tab btn'>&laquo; Prev Page</span>");
  12.  }
  13.  if (i+1 != totalSize) {
  14. next = i + 1;
  15. $(this).prepend("<a href='#' class='next-tab btn success' rel='" + next + "'>Next Page &raquo</a>");
  16.  } else {
  17. $(this).prepend("<span class='next-tab btn'>Next Page &raquo</span>");
  18.  }
  19. });
  20. $('.next-tab, .prev-tab').click(function() {
  21.  var i = parseInt($(this).attr('rel'));
  22.  var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
  23.  $tabContainer.easytabs('select', tabSelector);
  24.  return false;
  25. });
  26. $('.click').click(function() {
  27.  $('.panel-container').toggle('fast', function() {
  28. // Animation complete.
  29.  });
  30. });
Any help would be AMAZING!