Multiple conditions in if statement not working on Webflow

Question

I am using collection lists on Webflow. I'd like to hide a parent div when 2 fields in the list are empty, so both conditions have to be true together. Webflow is sometimes tricky with Jquery so I tried a few different ways but no luck. What am I doing wrong?

Searching for empty collection items with the webflow class .w-dyn-bind-empty & adding a class with display:none if the statement is true:

$(document).ready(function() {
var width = $(window).width();
if (width < 992) {
        var con = $("#contractor"),
            photo = $("#photography");
        if (con.hasClass('.w-dyn-bind-empty') && photo.hasClass('.w-dyn-bind-empty')) {
                $("#collaborators").addClass('is--off');
        }
    }
});

Or checking for the empty values and using .hide:

$(document).ready(function() {
var width = $(window).width();
if (width < 992) {
        var con = $("#contractor").val(),
            photo = $("#photography").val();
        if (con == "" && photo == "") {
                $("#collaborators").hide();
        }
    }
});

score 1 · Answer 1 · answered Dec 06 '22 at 18:57

I dont know how webflow collection list items work but maybe you should try to console.log your empty $('#example').val() and check your browsers console to get the information on how to validate. For example if you get a "undefined" you check it with if(typeof $('#example').val() == 'undefined') or if its just an empty string you check if($('#example').val().length == 0) and so on...

Memetican · Answer 2 · 2022-12-26T19:04:42.053

You can accomplish this more simply with CSS.

In both of the Webflow collection lists, add a custom attribute directly to the Collection Item, called item-found. It does not need a value.

When Webflow renders this page, any item rendered into either collection list will contain this custom attribute.

Now, we only want the containing section or DIV, with the ID of #collaborators, to appear if we have at least one child element with that item-found attribute.

You can accomplish that with this style CSS chunk;

<style>
#collaborators:not(:has([item-found])) {
  display: none;
}
</style>

You can put this in your page <head> custom code area, but if you put it directly into a custom code embed element within the page, it will work in the designer too.

This is a variation on the technique I outlined in this tutorial;

ADDING: I'd forgotten that I'd built this capability as an attributes-based feature in Sygnal's Webflow Utils library here, if you want a shortcut.

Multiple conditions in if statement not working on Webflow

2 Answers2