Conditional logic for 5 choices - help please!

Community resources
1

Hi,
I’ve created 5 choices and want the user to click on one choice so that it reveals that option and hides the other 4 choices including corresponding image and text block.

I’ve managed to set up a page trigger so that 4 of the choices are hidden when the page loads but that is about as far as I can get to. I think I need to set up an element trigger but I can’t see an option that gives me the choice to show one heading while hiding the others.

Can anyone figure out if this can be done please! Will it need to be hard coded :S

https://preview.webflow.com/preview/jwillard-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=jwillard-portfolio&preview=0c7a39e48b72f2651ed618c411cb472e&pageId=63088f92d84e4b9ecb772e1e&workflow=preview

Thank you!

2

This is actually pretty simple to do in JavaScript. JQuery is running on all WF sites so that would be much easier for non-coders.

Here is an example that you could build off of.
jQuery hide() Method (w3schools.com)

3

Many thanks for replying! Can this be done without any code as I’m all up for using code to speed things up, but I am definitely not a developer and my knowlwdge is extremely basic!

If it can’t be done in Webflow where do i insert the code? And is it input once, or do I use it for each choice?

Thank you!

4

I assume you’re talking about the section that reads Emerging, Developing, Practicing, Optimising, Leading.

If you can, I’d honestly recommend you stick with a standard Webflow element, such as a Tabs element, with styled Tab content, or even an Accordion element of some form. That should be much easier to manage- particularly for mobile support, and it will also give you e.g. a “depressed tab” styling option built-in.

Here’s a rough example of using a Tabs element for this;

https://preview.webflow.com/preview/michaels-dandy-site-9678a0?utm_medium=preview_link&utm_source=designer&utm_content=michaels-dandy-site-9678a0&preview=62e3ca41d55653c56000850b0b51b4d3&workflow=preview

I’m more of a programmer than a designer, but as option #2, I think Webflow’s interactions would allow you to program show/hide actions on each of your 5 buttons, that show/hide your 5 content blocks. You could even animate them that way.

All of those are options.

The coding option works also, but for what you’re trying to do, I think it will create more problems than it solves- because you won’t be able to see it operate in the designer as you’re doing your mobile styling.

If you went that route, the jQuery isn’t complex, but you’d need to understand how to identify and reference the elements you’re wanting to manipulate, and how to bind to an on-click or on-hover for your “tabs.”

Honestly I’d make that the last option, even as a developer, it won’t give you the smoothest end result.

5

Thanks for your reply! Really appreciate it. It’s going to take me ages to get to a decent level.

So I’ve set up the Tab function but I’m pulling my hair out… again… what I want is that when each tab is clicked on the arrow above it slides in from the left and the other headings to fade to 30% and corresponding arrow to disappear.

Can this be done?
Thanks

6

My guess is almost certainly. Webflow’s interactions are very slick and encompass a huge range of movement and opacity effects. Unfortunately I don’t use them enough to give you the exact formula.

Definitely watch the Webflow University tutorials on interactions, I believe somewhere there is even a training guide with exercises.

7

I found a youtube video which answered everything! :smiley:

Thanks

8

@Ursula - Well, that video would be valuable to others if you shared it, so please do.

9

Post it here?

1 Like