Streaming live at 10am (PST)

How to create tabbed panels?


#1

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)


#2

Can't really see a tabbed panel in your About page.

Why can't you use the Tab widget of Webflow to do your tabbed panel?


#3

It's not exactly tabbed, but the functionality is the same - near the bottom, if you click on the 'team' column or the 'contacts' column, it will change the content of the panel below. Still very WIP so functionality is limited, sorry if it's not clear.

I hadn't discovered the tab widget – it looks like it might be suitable, thanks. I'll check it out!


#4

Yes you can torture the Tab Widget very much... Especilly the tab part that you can make any size with any kind of content.

Try that and come back to tell us if this solves your request :slight_smile:


#5

Yep, works a treat - I've even started using tab panels inside tab panels, and using tabs as points on a map. I'm drunk with power! Thanks Vincent.


#6

Picturing you like an extatic pirate on a Rhum barrel spinning your sabre around :slight_smile:


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.