How to create a vertical accordion that changes based on time

Saagar_Bellani · October 6, 2021, 10:33am

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: https://webflow.com/website/Webflow-Tab-Auto-Rotation?rfsn=1238427.48b8d

Regards

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

Stan · October 6, 2021, 12:29pm

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.

Totor · October 6, 2021, 5:32pm

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

cheers

Saagar_Bellani · October 7, 2021, 6:14am

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

https://saagars-stellar-project.webflow.io/

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

Totor · October 7, 2021, 12:51pm

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

Stan · October 7, 2021, 3:58pm

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.