How to display certain tab depending on certain day of the week?

Design help General
1

Hey guys!

I’m using Webflow for a radio station website, and I’m looking for a way to use a tab element to have the programs on-air for each day of the week.

Each tab will be a day (Monday, Tuesday etc.) and inside the tab will be a clickable list of programs, who the presenter is etc.

I was wondering - Is there a way, maybe with custom code, to automatically switch to the tab depending on the day it is?

For example:

On Tuesdays, a listener visits the website, scrolls down to the programs section, and see’s the “Tuesday” tab in the tab element already selected, and displaying the programs for a Tuesday.

Is this possible?

Thanks in advanced :grinning:

2

Hello @KaiLovel

I’ve found this:

    <script>
      function showhide() {
        var d = new Date();
        var s = document.getElementById(+d.getDay());
        s.style.display = (s.style.display == 'block') ? 'none' : 'block';
      }
      showhide();
    </script>
3

Hi @aaronocampo,

How would I go about implementing this?

Thanks for your help!

Kai :smile:

4

Did you every accomplish this? I am looking to do the same thing. 1 activate the tab on the current day and also activate the time slot in the agenda.

5

No, not yet. I know @samliew is pretty swifty with JS?

6

Got it. Ive searched and asked in a couple of other places. If I find something I’ll let you know.

Im trying to duplicate what this site did. Depending on the day that tab is active then depending on time that slot time in the agenda is active.

https://womenimpacttech.com/wit-connect/event

7

Hello!
I just put together a cloneable demo that does this, https://webflow.com/website/Current-Day-of-the-Week-Tab?s=day-of-the-week-tabs.

The site includes a video walkthrough explaining the setup and the custom code, which you shouldn’t need to modify if you clone the project.

Please let me know if you have any questions!

2 Likes
8

Amazing, @cspags.

@Remi_Poirrier this will help!