Set active tab according to date in visual composer wordpress

Question

I´m trying to set an active tab according to the date. So if today is Tuesday, I need Tuesday to be the active tab. I´m working on wordpress, with visual composer plugin. Te JQuery that I`m working on, works fine with tabs made from scratch but I'm having trouble finding the correct class to set the "active" attribute to the tab. The website I'm trying this is http://ordernow.com.ar/home/ and I leave my js code for you to see. The part that I'm working on is the else if for todayIdx 2 cause I've worked on a tuesday. But you can copy that code to the index of the day you work. Thanks a lot.

<script>
    (function($){
var today =  new Date();
    var todayIdx = today.getDay();
    

    if (todayIdx === 0) {
        $('li:nth-child(6)').removeClass('active');
        $('li:nth-child(7)').addClass('active');
        $('.block article').hide();
        $('.block  #do1').show();
    }
    else if (todayIdx === 1) {
        $('li:nth-child(7)').removeClass('active');
        $('li:nth-child(1)').addClass('active');
        $('.block article').hide();
        $('.block  #lu1').show();
    }
    else if (todayIdx === 2) {
        $('.w-tabs-item.claselunes').removeClass('active');
        $('.w-tabs-item.clasemartes').addClass('active');
       
    }
    else if (todayIdx === 3) {
        $('li:nth-child(2)').removeClass('active');
        $('li:nth-child(3)').addClass('active');
        $('.block article').hide();
        $('.block  #mi1').show();
    }
    else if (todayIdx === 4) {
        $('li:nth-child(3)').removeClass('active');
        $('li:nth-child(4)').addClass('active');
        $('.block article').hide();
        $('.block  #ju1').show();
    }
    else if (todayIdx === 5) {
        $('li:nth-child(4)').removeClass('active');
        $('li:nth-child(5)').addClass('active');
        $('.block article').hide();
        $('.block  #vi1').show();
    }
    else  {
        $('li:nth-child(5)').removeClass('active');
        $('li:nth-child(6)').addClass('active');
        $('.block article').hide();
        $('.block  #sa1').show();
    }
console.log('jquery cargado con éxito');    
console.log('today:', todayIdx);
})(jQuery);
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 1 · Answer 1 · answered May 03 '18 at 11:10

I created the following function which switches visual composer tabs by ID.

var setVCTab = function(name) {

    var $id = "#"+name; 
    if ($($id).length > 0) {

        setTimeout(function() {

            // Clear tabs
            $(".vc_tta-tab").each(function(i,a) {
                $(a).removeClass("vc_active");
            });


            // Clear panels
            $(".vc_tta-panels").children().each(function() {
                $(this).removeClass("vc_active");
            });


            // Activate Tabs
            $(".vc_tta-tabs-list a[href="+$id+"]").each(
                function(i,a) { var tab = $(a).closest(".vc_tta-tab"); if (tab) tab.addClass("vc_active");}
            );

            // Activate Panel
            $($id).addClass("vc_active");

            location.href = $id;

        },1);
    }

};

Therefore it should be possible for you to do something like the following.

// Map day indices to tab IDs
var days =["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

// Activate tab for day
setVCTab(days[(new Date()).getDay()]);

Set active tab according to date in visual composer wordpress

1 Answers1