Search code examples
javascriptjqueryjquery-tabs

How to set default tab for initial load


Currently this webpage opens to the tab, "Freebies & Extras." I want it to open to the first tab, "Commonwealth & Council." I believe, by default, it will open to the first tab. I tried to locate where it is telling the browser to open it on the third tab but couldn't find it.


Solution

  • You need to set the active to 0 in the code

    $(document).ready(function() {
        $('div#Panels').tabs({
        active: 2,
        collapsible: false,
        activate: function(event, ui) {...
    

    UPDATE

    When you click the tab 0, then the page runs this code:

    $('#carousel').flexslider({
       animation: "slide",
       controlNav: false,
       animationLoop: true,
       slideshow: false,
       itemWidth: 80,
       itemMargin: 5,
       asNavFor: '#slider'
    });
    
    $('#slider').flexslider({
       animation: "slide",
       controlNav: false,
       animationLoop: true,
       slideshow: false,
       sync: "#carousel"
    });
    
    //-----------------
    $(window).resize();
    //-----------------
    

    Since you are not clicking this tab to start, this code is not running when the tab opens. You need to run the code by yourself. I suggest create a function and call it right after defining the tabs.

    The full script would be (maybe something is misplaced, because I haven't run it):

    function ClickedTab(carousel, slider){
       $(carousel).flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: true,
          slideshow: false,
          itemWidth: 80,
          itemMargin: 5,
          asNavFor: slider
       });
    
       $(slider).flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: true,
          slideshow: false,
          sync: carousel
       });
    
       //-----------------
       $(window).resize();
       //-----------------
    }
    
    $(document).ready(function() {
        $('div#Panels').tabs({
            active: 0,
            collapsible: false,
            activate: function(event, ui) {
              switch (ui.newPanel.index()) {
               case 0:
                  ClickedTab("#carousel", "#slider"); break;
               case 1:
                  ClickedTab("#carousel2","#slider2"); break;
              }
            }
        });
        ClickedTab("#carousel", "#slider")
    })