Hi guys!
I am new to webflow and trying to create an interaction similar to this:
You can also check it out live on Asana
From what I understand, The accordion hold content (paragraph, button) and the images are in slider that changes on tab click. What I can’t figure out is how to make it responsive. Here, they move the slider inside tabs on mobile. I would like to do the same.
I would like to use dynamic content for accordions (i.e. each accoridion tab is a collection item)
A solution without any custom code will be much appreciated.
@tahauxd You should be able to achieve this without custom code. You can add dropdown elements to Collection elements so that the content is dynamic. Set the collection to say 35vw and then the image can be position: absolute and have a width of 65vw. You can then add a left property of 35vw for the image. Then add the animation as needed
I’m not going to comment on the interactions but you could create something similar in webflow using the tabs component. You can position your tab to the side and there is an accordion open close to show / hide more info. The image is in the tab pane. I’m pretty sure Asana’s is a custom accordion slider. You can make tabs dynamic as well so that would be what I would suggest. I’m no interaction expert but with time you might be able to figure out something that looks like it.
Hey @dennyhartanto
Thanks for taking the time to reply, That’s what I am doing but when using collections I am unable to set the first dropdown as active initially.
Any way to make it work?
Thanks @jbleroux for the suggestion.
We can’t place link blocks inside tabs (e.g. learn more)
And I dont think we can position tabs content pane below each tab menu link.
Also tabs wont work with dynamic content.
oh maybe I was thinking about the combination with f’nsweet library. I’ve been use that a lot to workaround the many webflow CMS limitations. Webflow Tabs - F'in sweet CMS Library
They have very good explainer videos and cloning as well as a visual code writer so might be an option.
Thanks again @jbleroux , But I was looking for a way to do this natively with webflow without any custom code.
@tahauxd to open the dropdown is a bit tricky, you can checkout this thread Set dropdown initial state to open - #16 by SuperLalapenn . The solution there however I think works only on tablet/mobile/tap devices.
@dennyhartanto it seems there is no solution on the mentioned thread. We can use interactions to initially open a dropdown (hopefully) but then it would open all other collection item dropdowns.
@tahauxd I don’t think its possible to open it on load with interactions, at least not an ideal solution to open it. But do try and share if it works!
I wouldn’t be too scared of the using the little bit of script . Here is a page with it in action
the page is untitled. If you look at the script there isn’t much there and easy to implement the tabs. https://preview.webflow.com/preview/jeremys-fancybox-clone?utm_medium=preview_link&utm_source=designer&utm_content=jeremys-fancybox-clone&preview=6885b7c2a79dac9305513fe039385e93&pageId=60401704fcffe968a1ee732f&mode=preview - PAGE Untitled.
here it is in action. https://jeremys-fancybox-clone.webflow.io/untitled
functionally you can create what you want using the f’insweet script. But unfortunately a lot of the native webflow components have not been integrated with the CMS well at all. The script also allows you to put all kinds of dynamic content into the Tab Menu area. so you could build an accordion out. The auto sliding portion would be the interaction you’d have to figure out.
@jbleroux WOW! Thanks for coming up with the demo.
Unfortunately, it doesn’t fit my needs.
I want the content to appear below each tab link (just like accordions)
It would be cool to make it work with a cms but that isn’t necessary.
I will let you know if I figure this out.
That is not styled at all. I was testing the dynamic tabs for a lighbox gallery. just wanted to show you it is possible with the script to create dynamic tabs and the base interaction of tabs will do what you want. accordion interaction would still have to be created. tabs positioned to the left tab pane positioned to the right.