Lookingo for suggestions on cleaner code

Lookingo for suggestions on cleaner code

I recently wrote some code to handle a situation on a site, and I'm pretty sure it's not the prettiest jQuery code.  I'm posting a description and my code here (it's not too long) in the hopes that someone can review it and give me some suggestions on how I might make it neater and more efficient.

Here's the situation:

This screen shot shows the starting point, and this one shows the resulting HTML.  What I need to accomplish from a display standpoint is this.  The two new icons added switch between the display shown in the previous shots and this one.

The relevant HTML that I am manipulating is the quicktabs_container_2 div by just adding or removing the 'quicktabs-hide' class for the relevant div (all the content is already loaded within each div).

Here is the code I came up with that seems to do the trick:

  1. Drupal.behaviors.switchDisplay = function () {
  2.   //Add the two buttons for changing the display to the left of the tabs
  3.   $("div#quicktabs-2 ul.quicktabs_tabs li.qtab-0").before("<li class='bars'>&nbsp;</li><li class='boxes'>&nbsp;</li>");
  4.   // Initially hide the tabs for the bars display
  5.   $("div#quicktabs-2 ul.quicktabs_tabs li.qtab-2").hide();
  6.   $("div#quicktabs-2 ul.quicktabs_tabs li.qtab-3").hide();
  7.  
  8.   $("#quicktabs-2 ul.quicktabs_tabs li.bars").click(function () {
  9.     var tabId =  $("div#quicktabs-2 ul.quicktabs_tabs li.active").attr("class").substring(5,6);
  10.     var newTab = parseFloat(tabId) + 2;
  11.       //Find the quicktabs div that is active to determine which display to show
  12.     var activeElement = $("div#quicktabs_container_2 #quicktabs_tabpage_2_" + tabId).attr("class");
  13.     // Hide the active class
  14.     $("#quicktabs_container_2").children().not('.quicktabs-hide').addClass('quicktabs-hide');
  15.     //Show the bars version
  16.     $("#quicktabs_tabpage_2_" + newTab).removeClass("quicktabs-hide");   
  17.   });
  18.  
  19.   $("#quicktabs-2 ul.quicktabs_tabs li.boxes").click(function () {   
  20.     var tabId =  $("#quicktabs_container_2").children().not(".quicktabs-hide").attr("id").substring(20,21);
  21.     if (parseFloat(tabId) == 2 || parseFloat(tabId) == 3) {
  22.       var newTab = parseFloat(parseFloat(tabId) - 2);
  23.     }
  24.     else {
  25.       newTab = parseFloat(tabId);
  26.     }
  27.       //Find the quicktabs div that is active to determine which display to show
  28.     var activeElement = $("div#quicktabs_container_2 #quicktabs_tabpage_2_" + tabId).attr("class");
  29.     // Hide the active class
  30.     $("#quicktabs_container_2").children().not('.quicktabs-hide').addClass('quicktabs-hide');
  31.     //Show the boxes version
  32.     $("#quicktabs_tabpage_2_" + newTab).removeClass("quicktabs-hide");   
  33.   });   
  34. };
And this is a Drupal site, and the code is generated using the Views and Quicktabs modules.

In particular I'm looking for ways I can make this more dynamic and not have to rely on the actual numbers at the end of the classes and ids.

Please don't grimace too much at the code and hurt your face.  Any suggestions are greatly appreciated.

Thanks.