[Tutorial] — How to Automatically Show a Tab Based on Day of the Week

Community resources Webflow Tips
1

Hey all! I hope everyone is doing well and staying safe :webflow_heart:

Somebody asked on the Webflow Facebook group this morning how to display a tab based on the day of the week.

I cobbled together the below solution and thought I’d share what I came up with in case anybody else was wanting to achieve the same effect.

Disclaimer: I am by no means a code expert (complete newbie, actually). So if there is a more efficient way to do this, or I have made a mistake, then please comment and let me know!

Step 1.
Drop in a tabs component:

Tabs Component
Tabs Component496×620 32.5 KB

Step 2.
Create 7 tabs, with 7 tab panes inside. Make sure all your tab links have the class .tab-link, and all your tab panes have the class .tab-pane:

Tabs Structure
Tabs Structure500×848 38.7 KB

Step 3
Copy and paste the below code into the before /body tag:

<script>
//remove the default tab and content
$(".tab-link").removeClass("w--current");
$(".tab-pane").removeClass("w--tab-active");

$(document).ready(function(){		
//get the day of the week
var fullDate = new Date();
var dayOfWeek = fullDate.getDay();

//changing Sunday to 7 (instead of 0)
if (dayOfWeek == 0) {
    dayOfWeek = 7;
  }

//display tab and content that match today's number (1 to 7)
$(".tab-link:nth-child(" + dayOfWeek + ")").addClass("w--current");
$(".tab-pane:nth-child(" + dayOfWeek + ")").addClass("w--tab-active");

});
</script>

Tabs Code
Tabs Code1130×904 103 KB

Code Breakdown:
1. This removes the active tab and pane when the page loads. By default, this is the tab you left selected in the designer when you last hit publish.

$(".tab-link").removeClass("w--current");
$(".tab-pane").removeClass("w--tab-active");

2. new Date() creates a new date object, and getDay() then retrieves the current day from that object. Note: 0=Sunday, 1=Monday, … 6=Saturday. For more info on the getDay() method, you can visit here.

var fullDate = new Date();
var dayOfWeek = fullDate.getDay();

3. This is just a super simple if statement that checks if the current day is 0 (Sunday) and replaces it with a 7.

if (dayOfWeek == 0) {
    dayOfWeek = 7;
  }

4. This is what makes the correct tab and pane show up. So if it’s a Monday then tab 1 will display, Tuesday tab 2, Wednesday tab 3, etc.

$(".tab-link:nth-child(" + dayOfWeek + ")").addClass("w--current");
$(".tab-pane:nth-child(" + dayOfWeek + ")").addClass("w--tab-active");

And that’s it! A good use case for this would be if you had a restaurant that had different menus for each day of the week, and you wanted to automatically display the current day’s menu to the user.

I hope this was useful! Please let me know if you have any questions and I’ll try my best to help out :smiley:

Edit 1: Correcting code typos.
Edit 2: Updating code screenshot.

2 Likes
2

Pretty neat Oli! I was wondering how to do something like that but to track time spent on my website.

I want to show my users at a given time for how long they have been on my site. Maybe an idea for another tut?

Thanks for sharing and keep those coming!

1 Like
3

Thanks Luis! This is the first proper piece of code I’ve written, so I’m just glad that it works haha :joy:

Oh that’s an interesting idea for sure! Would you be looking to display their time just for that current session, or the total amount of time they have spent on your website since their very first visit?

4

Yeah Just and only for the current session. My guess that’s easier right? no need for cookies or something.

Although now that you mention it, the idea to track the whole time could also be nice.