minimising JS for tabs
<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>
