On a few pages of the site I’m working on, I’m trying to implement what is effectively a tabbed panel, where clicking on a ‘tab’ changes the visible content of the target panel.
(Ref on my shared link, the ‘About Us’ page - click between the ‘Teams’ section and the ‘Contacts’ section, which will change the content of the panel below)
I’ve built things like this before in code with JS, but in Webflow I’m not sure of the best approach:
-
When each section ‘tab’ is clicked, the panels that aren’t needed would all be told to fade to 0% opacity and then Display:none, after which the required one becomes Display:block and then fades up to 100% opacity. So far, so simple…
-
With more than a couple of tabs, this structure becomes very complicated and long-winded in terms of building the animations, as each target element has to have a discrete animation sequence attached to it, is that right? Is there any way of saying ‘fade to 0, display none’ to multiple elements with one trigger sequence?
-
The way I’m currently building it is to have all the panel items set to display:block as I work on them, and then manually set all that should be hidden to ‘none’ when it’s time to publish. This is a very slow process, especially just to make minor changes. Is there a more practical method? Perhaps being able to define an initial state on page load for each relevant block?
Thanks for any help!
Olly
Here is my public share link: LINK
(how to access public share link)
