I’m using the HTML embed component to build a template which displays content from the CMS. This template is displayed within a fancybox lightbox.
Live published link: https://mixitup-fancybox.webflow.io/
Can anyone help out with writing some code to set the visibility of a particular div based on the state of a switch in the CMS?
I’m struggling with this but was trying the following within the HTML embed:
Does anyone know if this is possible using custom code?
Hey this is an ancient post but did you ever work it out? I’m doing the same thing now.
I have the same issue, however I’m trying to get element by its Class. Here is my code that yet doesn’t work:
Hi @Dovydas_Sidabras, try using lowercase class name. I don’t know why Webflow allows us to use uppercase class names since on the exported code, all classes are being lowercased and added dashes should the class in the designer have a white space. So in Webflow designer you’ll have “Unlocked” but in the exported code your element will have a class of “unlocked”.
Hi, thanks for your reply. I was really hopping that was the problem, but unfortunately it is not. I’ve changed class names into lowercase and result is the same.
However with some trial-error I discovered few things that might be helpful. Instead of using == I just used = and that took me one step closer because now it kind of works using getElementById ( seriously it only works with one =) however it only applies to the first item on the list, thats why getElementsByClassName seems like better solution, only if it would work of course. The code right now looks like this:
Hi @Dovydas_Sidabras When using getElementsByClassName have you considered using a loop to iterate over the result? I believe that function returns a collection, rather than a single element.
Refer to the very last example on this page for a code block that does this. Perhaps you could try something similar.
SOLVED. If anyone is looking for custom code for conditional visibility this is how I did it:
<script>
var x = document.getElementsByClassName("unlocked");
var y = document.getElementsByClassName("locked");
if ("webflow field tag" == "Paid") {
for (let i = 0; i < x.length; i++) {
x[i].style.visibility = 'hidden';
}
} else {for (let i = 0; i < y.length; i++) {
y[i].style.visibility = 'visable';
}
}
if ("webflow field tag" == "Paid") {
for (let i = 0; i < y.length; i++) {
y[i].style.visibility = 'visable';
}
} else {for (let i = 0; i < x.length; i++) {
x[i].style.visibility = 'hidden';
}
}
</script>
I’m glad that iterating over the collection worked, @Dovydas_Sidabras.
But, it seems that your code will always set x elements to hidden and y elements to visible. For example:
Status is Paid, then the first if block won’t change the y array. The second if block will set the y array elements to visable.Status is something else, then the first if block sets the y array elements to visable. The second if block doesn’t change the y array.So, the y elements are set to visable either way. Maybe I’m missing something?
I had a similar problem, but in addition to hiding CMS collection, I wanted to hide the whole section containing that CMS collection when the CMS collection was empty.
Here’s the JS that worked for me:
<style>
.hidden {
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const sectionHomeEvents = document.querySelector("#section_home-events");
const dynItems = sectionHomeEvents.querySelectorAll(".w-dyn-item");
if (dynItems.length === 0) {
sectionHomeEvents.classList.add("hidden");
}
});
</script>
This script targets the div with the id “section_home-events” and adds the .hidden class to it if there are no child elements with the .w-dyn-item class. This will effectively hide the div if it doesn’t contain any elements of the specified class.