Question

How can i make this smaller?

<div id="tabsWrapper">
              <div class="tabMenu">
                <ul>
                  <li><a href="#" class="menu" id="One" class="activeTab">{tab-01-title}</a></li>
                  <li><a href="#" class="menu" id="Two">{tab-02-title}</a></li>
                  <li><a href="#" class="menu" id="Three">{tab-03-title}</a></li>
                  <li><a href="#" class="menu" id="Four">{tab-04-title}</a></li>
                  <li><a href="#" class="menu" id="Five">{tab-05-title}</a></li>
                  <li><a href="#" class="menu" id="Six">{tab-06-title}</a></li>
                  <li><a href="#" class="menu" id="Seven">{tab-07-title}</a></li>
                  <li><a href="#" class="menu" id="Eight">{tab-08-title}</a></li>
                  <li><a href="#" class="menu" id="Nine">{tab-09-title}</a></li>
                  <li><a href="#" class="menu" id="Ten">{tab-10-title}</a></li>
                  <li><a href="#" class="menu" id="Eleven">{tab-11-title}</a></li>
                  <li><a href="#" class="menu" id="Twelve">{tab-12-title}</a></li>
                </ul>
              </div>
              <div id="tabbedContent">
                <ul>
                  <section id="tabOne" class="contentTab">
                    <h3>{tab-01-title}</h3>
                    {tab-01-content} </section>
                  <section id="tabTwo" class="contentTab">
                    <h3>{tab-02-title}</h3>
                    {tab-02-content} </section>
                  <section id="tabThree" class="contentTab">
                    <h3>{tab-03-title}</h3>
                    {tab-03-content} </section>
                  <section id="tabFour" class="contentTab">
                    <h3>{tab-04-title}</h3>
                    {tab-04-content} </section>
                  <section id="tabFive" class="contentTab">
                    <h3>{tab-05-title}</h3>
                    {tab-05-content} </section>
                  <section id="tabSix" class="contentTab">
                    <h3>{tab-06-title}</h3>
                    {tab-06-content} </section>
                  <section id="tabSeven" class="contentTab">
                    <h3>{tab-07-title}</h3>
                    {tab-07-content} </section>
                  <section id="tabEight" class="contentTab">
                    <h3>{tab-08-title}</h3>
                    {tab-08-content} </section>
                  <section id="tabNine" class="contentTab">
                    <h3>{tab-09-title}</h3>
                    {tab-09-content} </section>
                  <section id="tabTen" class="contentTab">
                    <h3>{tab-10-title}</h3>
                    {tab-10-content} </section>
                  <section id="tabEleven" class="contentTab">
                    <h3>{tab-11-title}</h3>
                    {tab-12-content} </section>
                  <section id="tabTwelve" class="contentTab">
                    <h3>{tab-12-title}</h3>
                    {tab-12-content} </section>
                </ul>
              </div>




 $(".tabMenu ul > 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;
        });  

Answer 1

First, you will add classes to everything. To all the “menu”s give class="menu" and to all the “tab”s give class="tab". Make the ids of the a tags just the number. So just “One” or “Two”, take out the “menu” part of the id (but leave the tabs the same). Finally, use this function (replace the switch):

var id = e.target.id;
if ( !$( "#" + id ).hasClass( "activeTab" ) ) { // don't run if active link is being clicked
    $( "a.menu" ).removeClass( "activeTab" ); // remove active from all menus
    $( "#" + id ).addClass( "activeTab" ); // make clicked menu link active
    $( ".tab" ).css( "display" , "none" ); // hide all tabs (I assume div, but not sure so I didn't include the tag name in selector)
    $( "#tab" + id ).fadeIn( { easing : 'easeInOutSine' } , 900 ); // ease in selected tab
}

edit Here is a jsFiddle. It wasn’t working with your easing (I can’t say I have used any easing in the past) but you can check it out and hopefully you can use it.