I’m using a jquery load function with the html embed to get some CMS elements from another page within the same project. The itens are loading, but the animation I made isn’t working on those embeded elements.
I tested the same elements including them outside the embed and it worked fine. Is there a way to load the animation after the jquery inserted the elements on the html embed?
Hey @Vitor_Cordeiro have you tried targeting a class with the interaction and including it somewhere on the page? I’m wondering if the JS for the interaction won’t get published on the page if it can’t see an element with that trigger class since the renderer is unaware of the classes inside the embed element.
The problem is that I’m using this for an accordion. I need the initial state of one of the embeded elements to be zero height/hidden.
But I think the solution you are suggesting would solve the trigger.
EDIT: I tried your suggestion, but since the embeded element forms a list and I want to trigger individual elements on this list, the trigger opens and closes all of the items on the list.
@Vitor_Cordeiro looking at your project, looks like you found a solution that doesn’t use custom code allowing for targeting this element on the interaction. That right?
Would be great if you can share your solution for others who come across an issue similar to yours.
Just to make it clear, since it’s a customized solution, I don’t consider it a webflow problem. But, if there’s a way to delay the native animation script load, it would probably work. I’m also in contact with the creators of both solutions to see if there’s a way to make it work.
Hi @Vitor_Cordeiro I have this morning revisit my example from yesterday late night and I have done for you a new example that taking opposite approach. First example traversed DOM from top to bottom but this new example use closest that traverse DOM from bottom to top. So there is no need to find nested childNodes
// get all hidden elements
const contents = [...document.querySelectorAll(".sc-class-item-more")];
contents.forEach((item) => {
// find closest parent element with given class
const parent = item.closest(".sc-content-class-item-wrapper");
// toggle height on click
parent.addEventListener("click", () => {
item.style.height = item.style.height != "auto" ? "auto" : "0";
});
});
Hi @Vitor_Cordeiro if you will use it on any other pages you can place it into site custom code ‘before body’ tag. If you will use it only on this page place code in page settings on same place. Dont forget to wrap this code in script tags.
EDIT: if code will be applied only to specific page the code has to be applied to page you injecting elements into DOM.
There’s still some relation with the webflow native animation. If I delete the animation I made on webflow, the list stays open and I have to click twice to get it to work like it should.
I’m not on comp now and I can’t check this as I don’t have permissions to save changes. But easiest way to do it with JS. This mean set animation in CSS and add class with JS. I will check tonight as I don’t have time right now but it should be an easy fix.
hi @Vitor_Cordeiro it seems that you are working on file as I do have inconsistent results when running script in console. Anyway here is simple code added to set init height to zero and toggle arrow.
Hey @Stan ! I apologize for the delay. But it worked great. Thanks a lot! I’ll try to upgrade to animate it. Last week, Finsweet introtuced “Atrributes” to replace their CMS Library. I’ll also try it to see if they fixed the animation problem with the nested elements.