Streaming live at 10am (PST)

How to create a vertical accordion that changes based on time

Hi - can any one help on how would you go on creating the following module - kind of a accordion based on time

Similar concept but in horizontal: webflow-tab-auto-rotation - Webflow


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

hi @Saagar_Bellani you have everything you need in this project. When you clone this project you can study it in detail. Javascript you need for timing is in page setting. All you have to do is just move top to side.

Hey @Saagar_Bellani in your example:

  • Turn the grid of Tab Panel class to a vertically flex display
  • For the Tabs class : Display Flex horizontal, align strech, justify start
  • For the Tabs Menu class : Display Flex vertical, align strech, justify start
  • Finally you can set a height of 350 for Lottie Animation class to reduce the card size


Hi @Totor, thanks a lot - any thoughts on how to put a continues line in the bg - like this but with one line

Basically because of the color difference when i down the opacity on the inactive tab so if there any workaround the color that works also

I think you may to design background with a sketch app like adobeXD and put it in bg.

Hi @Saagar_Bellani most common approach to create vertical line is to use HTML and CSS. As there is many ways how to you can search internet to find the way it will suite you. Using image is let say not good practice.