title: minimising JS for tabs
body: <p>How can i make this smaller?</p>
  
  <pre><code>&lt;div id="tabsWrapper"&gt;
                &lt;div class="tabMenu"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="One" class="activeTab"&gt;{tab-01-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Two"&gt;{tab-02-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Three"&gt;{tab-03-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Four"&gt;{tab-04-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Five"&gt;{tab-05-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Six"&gt;{tab-06-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Seven"&gt;{tab-07-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Eight"&gt;{tab-08-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Nine"&gt;{tab-09-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Ten"&gt;{tab-10-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Eleven"&gt;{tab-11-title}&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="menu" id="Twelve"&gt;{tab-12-title}&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div id="tabbedContent"&gt;
                  &lt;ul&gt;
                    &lt;section id="tabOne" class="contentTab"&gt;
                      &lt;h3&gt;{tab-01-title}&lt;/h3&gt;
                      {tab-01-content} &lt;/section&gt;
                    &lt;section id="tabTwo" class="contentTab"&gt;
                      &lt;h3&gt;{tab-02-title}&lt;/h3&gt;
                      {tab-02-content} &lt;/section&gt;
                    &lt;section id="tabThree" class="contentTab"&gt;
                      &lt;h3&gt;{tab-03-title}&lt;/h3&gt;
                      {tab-03-content} &lt;/section&gt;
                    &lt;section id="tabFour" class="contentTab"&gt;
                      &lt;h3&gt;{tab-04-title}&lt;/h3&gt;
                      {tab-04-content} &lt;/section&gt;
                    &lt;section id="tabFive" class="contentTab"&gt;
                      &lt;h3&gt;{tab-05-title}&lt;/h3&gt;
                      {tab-05-content} &lt;/section&gt;
                    &lt;section id="tabSix" class="contentTab"&gt;
                      &lt;h3&gt;{tab-06-title}&lt;/h3&gt;
                      {tab-06-content} &lt;/section&gt;
                    &lt;section id="tabSeven" class="contentTab"&gt;
                      &lt;h3&gt;{tab-07-title}&lt;/h3&gt;
                      {tab-07-content} &lt;/section&gt;
                    &lt;section id="tabEight" class="contentTab"&gt;
                      &lt;h3&gt;{tab-08-title}&lt;/h3&gt;
                      {tab-08-content} &lt;/section&gt;
                    &lt;section id="tabNine" class="contentTab"&gt;
                      &lt;h3&gt;{tab-09-title}&lt;/h3&gt;
                      {tab-09-content} &lt;/section&gt;
                    &lt;section id="tabTen" class="contentTab"&gt;
                      &lt;h3&gt;{tab-10-title}&lt;/h3&gt;
                      {tab-10-content} &lt;/section&gt;
                    &lt;section id="tabEleven" class="contentTab"&gt;
                      &lt;h3&gt;{tab-11-title}&lt;/h3&gt;
                      {tab-12-content} &lt;/section&gt;
                    &lt;section id="tabTwelve" class="contentTab"&gt;
                      &lt;h3&gt;{tab-12-title}&lt;/h3&gt;
                      {tab-12-content} &lt;/section&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
  
  
  
   $(".tabMenu ul &gt; li a").click(function(e){  
              switch(e.target.id){  
              case "menuOne":  
                  $("#menuOne").addClass("activeTab");  
                  $("#menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#tabOne").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;  
              case "menuTwo":  
                  $("#menuOne, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuTwo").addClass("activeTab");  
                  $("#tabTwo").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;  
              case "menuThree":  
                  $("#menuOne, #menuTwo, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuThree").addClass("activeTab");  
                  $("#tabThree").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuFour":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuFour").addClass("activeTab");  
                  $("#tabFour").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuFive":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuFive").addClass("activeTab");  
                  $("#tabFive").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuSix":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuSix").addClass("activeTab");  
                  $("#tabSix").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuSeven":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuEight, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuSeven").addClass("activeTab");  
                  $("#tabSeven").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabEight, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuEight":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuNine, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuEight").addClass("activeTab");  
                  $("#tabEight").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabNine, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuNine":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuTen, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuNine").addClass("activeTab");  
                  $("#tabNine").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabTen, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuTen":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuEleven, #menuTwelve").removeClass("activeTab");  
                  $("#menuTen").addClass("activeTab");  
                  $("#tabTen").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabEleven, #tabTwelve").css("display", "none");  
              break;
              case "menuEleven":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuTwelve").removeClass("activeTab");  
                  $("#menuEleven").addClass("activeTab");  
                  $("#tabEleven").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabTwelve").css("display", "none");  
              break;
              case "menuTwelve":  
                  $("#menuOne, #menuTwo, #menuThree, #menuFour, #menuFive, #menuSix, #menuSeven, #menuEight, #menuNine, #menuTen, #menuEleven").removeClass("activeTab");  
                  $("#menuTwelve").addClass("activeTab");  
                  $("#tabTwelve").fadeIn({easing:'easeInOutSine'}, 900);
                  $("#tabOne, #tabTwo, #tabThree, #tabFour, #tabFive, #tabSix, #tabSeven, #tabEight, #tabNine, #tabTen, #tabEleven").css("display", "none");  
              break;
              }  
              //alert(e.target.id);  
              return false;
          });  
  </code></pre>