Activate tab based on day of the week

Question

I have searched the forum for related threads, but the solution I came across do not work.

I use Bootstrap to display a tabgroup with two tabs. I need Tab 1 to be automatically active from Monday to Friday and Tab #2 to be active Saturday to Sunday.

Here's my HTML:

 <ul class="cat_filter nav nav-tabs right" role="tablist">
  <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab #1</a></li>
  <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab #2</a></li>
  </ul>

<div class="tab-content">
  <div id="tab1" role="tabpanel" class="tab-pane fade in active woocommerce">Some content</div>     
  <div id="tab2" role="tabpanel" class="tab-pane fade woocommerce">Some content</div>    
</div>

I have already tried the following threads but they don't work for me: Weekday jQuery UI Tabs open on current day load correct day of the week inside accordion gallery

please check my answer and provide the feed back – Robin Jul 14 '15 at 17:08 — Robin, Jul 14 '15 at 17:08

score 1 · Answer 1 · answered Jul 14 '15 at 17:07

1

Please try the following :

<?php if(date('l') == 'saturday' || date('l') == 'sunday'){ //l is smallcase L not number 1
  $day = 'tab2';   
  }else{
  $day = 'tab1';
}
?>
<ul class="cat_filter nav nav-tabs right" role="tablist">
  <li role="presentation" class="<?php if($day == 'tab1'){echo 'active';}?>"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab #1</a></li>
  <li role="presentation" class="<?php if($day == 'tab2'){echo 'active';}?>"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab #2</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" role="tabpanel" class="tab-pane fade in active woocommerce">Some content</div>     
  <div id="tab2" role="tabpanel" class="tab-pane fade woocommerce">Some content</div>    
</div>

answered Jul 14 '15 at 17:07

Robin

471
6
18

Thank u for the answer. I'll test it and get back to you. I am working on WP & the client has a shared hosting account so I need to push the day in the installation to check it. – kat_indo Jul 14 '15 at 17:14
Unfortunately your solution doesn't work. It's Saturday so Tab #2 should have bee automatically activated but nothing happened. – kat_indo Jul 18 '15 at 22:43
ok i think the date('l') must be returning the day according to the UTC date and time and may be you are in different time zone, adjust accordingly or tell me your time zone or hours difference from UTC, i will help you – Robin Jul 19 '15 at 08:42
I am sorry for the delayed reply. The timezone selected in the WP Installation is UTC-4. – kat_indo Jul 22 '15 at 22:58

score 1 · Answer 2 · answered Jul 14 '15 at 17:21

This is an alternative solution in javascript and jquery. We first identify the day index and if it is 0 (sunday) or 6 (saturday) Tab 1 is actived, otherwise Tab 2 is activated. See jsfiddle here

$(function(){
    var today =  new Date()
    var todayIdx = today.getDay();
    console.log('today:', todayIdx);

    if (todayIdx == 0 || todayIdx == 6) {
        $('a[aria-controls="tab1"]').closest('li').addClass('active');
        $('a[aria-controls="tab2"]').closest('li').removeClass('active');
    }
    else {
        $('a[aria-controls="tab2"]').closest('li').addClass('active');
        $('a[aria-controls="tab1"]').closest('li').removeClass('active');
    }
});

Thank you for the answer. Your solution works and actually makes active Tab#1 now that's Saturday. How can I expend it though so it actually clicks the tab and shows its content? Right now shows Tab#1 active, but you see the content of Tab#2 — kat_indo, Jul 18 '15 at 22:50

Activate tab based on day of the week

2 Answers2