How can I make a div block conditionally visible in Webflow based on whether one of two links is set?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To conditionally show or hide a div block in Webflow based on the selection of one of two links, you can follow these steps:

Create the div block: Start by creating the div block that you want to conditionally show or hide. Give it a unique class name for easy targeting.
Set default visibility: By default, the div block should either be visible or hidden. Determine the initial visibility state of the div block and set it using either the Style panel or by adding appropriate custom code.
Add link elements: Next, add the two link elements to your design. Give each link a unique class name to target them later.
Create an interaction: To create the conditional visibility behavior, you will use interactions. Open the Interactions panel and click on the "+" icon to create a new interaction.
Set up trigger: Choose the trigger type for your interaction. In this case, you will select the "Link Clicked" trigger, and then select the two link elements you created earlier.
Define the actions: Within the interaction, create two actions. The first action should be "Hide" for the div block that you want to conditionally show or hide. Select the div block from the "Elements" dropdown, and choose the "Hide" animation.
Create a condition: After the "Hide" action, add a condition to check which link was clicked. Select the "Equal to" condition, and choose the class name of the link that corresponds to showing the div block. Select the appropriate link from the "Elements" dropdown.
Add show action: Below the condition, add a "Show" action for the div block. Select the div block from the "Elements" dropdown, and choose the "Show" animation.
Repeat for the other link: Duplicate the actions you set up in steps 6-8 to handle the case when the other link is clicked. Update the condition for the second set of actions to target the other link.
Preview and test: Preview your website to test the conditional visibility behavior. Clicking on one of the two links should show the div block while hiding it when the other link is clicked.

By following these steps, you can create conditional visibility for a div block in Webflow based on the selection of one of two links. This allows you to control the visibility of elements on your website dynamically in response to user interactions.

Additional Questions:

How can I show and hide elements dynamically based on user input in Webflow?
Can I use custom code to conditionally show or hide elements in Webflow?
What other types of interactions can I create in Webflow to enhance the user experience?

How can conditional visibility be enabled on a Webflow form based on a value selected from a drop-down?

Is it possible to use attributes to search a string in Webflow that contains the value rather than being an exact match?

How can I set a condition in Webflow to display a different logo image when reaching a specific section on the website?

How can I have a button click carry data to a form across pages in Webflow, specifically to select the appropriate form checkbox based on the button clicked on a product page?

How can I redirect a user to a specific page based on the CMS page the form is in?

In Webflow, how can I require that at least one option from a radio group be selected before submission?

Is there a workaround in Webflow for selecting collections with date fields when using Logic to create a CMS item from a form?

Is it possible to create a logic sequence in Webflow that updates another collection when a new item is added?

Is there a glitch with a conditional visible element value causing a button to redirect to the homepage instead of the intended section on the same page in Webflow?

Is it possible to build an assessment tool in Webflow where users can choose their most and least preferred options for each card and capture these choices for later use? Should I consider building it outside of Webflow and linking it to my Webflow site instead?