Is it possible in Webflow to use two conditional visibilities with an "or" operator instead of an "and" operator for displaying athlete statistics?

Published on
September 22, 2023

Yes, it is possible to use two conditional visibilities with an "or" operator in Webflow for displaying athlete statistics. Conditional visibilities in Webflow allow you to show or hide elements based on certain conditions. By default, Webflow uses an "and" operator, which means all conditions must be met for an element to be displayed. However, you can achieve the desired functionality of using an "or" operator by utilizing custom code.

Here's how you can do it:

  1. Select the element that you want to apply the conditional visibility to.
  2. Open the element settings panel on the right-hand side.
  3. Navigate to the "Display" section.
  4. Click on the "+" button to add a new conditional visibility rule.
  5. In the first dropdown menu, select the property you want to base the condition on (e.g., "Athlete Name").
  6. Choose the desired operator (e.g., "is not empty").
  7. Leave the second dropdown menu blank.
  8. Click on the "+" button again to add a second conditional visibility rule.
  9. In the first dropdown menu of the new rule, select another property (e.g., "Athlete Position").
  10. Choose the same operator as before.
  11. Leave the second dropdown menu blank.
  12. Finally, switch to the "Custom Code" tab at the top of the settings panel.
  13. In the "Enter custom code" input field, you can enter the following CSS code:

```css
display: none !important;
```

This code ensures that if none of the conditions are met, the element will be hidden.

  1. Save your changes.

By setting up these conditional visibilities, you allow the element to be displayed if either the athlete's name or position meets the specified conditions. If at least one of the conditions is met, the element will be visible.

This method enables you to create more flexibility in displaying athlete statistics based on different conditions. However, keep in mind that using custom code may require a higher level of expertise and may not be suitable for beginners.

Additional Questions:

  1. How do I add a conditional visibility rule in Webflow?
  2. Can I use multiple conditional visibilities in Webflow?
  3. Is it possible to combine multiple conditional visibilities with different operators in Webflow?