Streaming live at 10am (PST)

Cannot find and select a node

I have a project referenced below, I have an open and close fontawesome icon that appears upon publishing, but I cannot find it within my webflow DOM, it appears to have ::after as part of the class, however I cannot find it! I need to select it and add the right styling to it, if you can help me understand how this ::after class parameter works and how to make sure I can select the parent element? Thanks,

Kevin


Here is my site Read-Only: https://preview.webflow.com/preview/kevinkeiper-b955e59cd850399a95fbc1c22e9?utm_medium=preview_link&utm_source=designer&utm_content=kevinkeiper-b955e59cd850399a95fbc1c22e9&preview=363b563acba89ba92228fcae702d85df&pageId=5eea512af31369866157c13d&mode=preview
(how to share your site Read-Only link)

Hey Kevin!
Can you specify which element you mean? I couldn’t find a open/close icon on your page :sweat_smile:

Lol that’s the problem - try publishing the project from the link I shared with you… thank you for your reply!

Kk

unfortunately that’s not possible. Read-only’s can’t be published, can you provide the link? Maybe also a screenshot?

what do you mean, “the link”? I already provided the sharable project link, what other links are there?

does this help?

https://kevinkeiper-b955e59cd850399a95fbc1c22e9.webflow.io/home-new

That’s what I meant! Thanks!

So, may I ask why you use all these custom things, when WF provides those tools (and more) out of the box?

There’s a guide on the WF university that shows how you can create a custom accordion including the exact arrow animation.
I’d suggest giving this a try, instead of debugging this.
Using WF build in features will make you website faster (less external requests) and WF own performance enhancements for the animation.

See this for the custom accordion.

And this for the exact arrow animation.

This message is not encrypted but sent from a verified user on the dmail blockchain

Thanks but your first video says the UI is changing, meaning the video isn’t accurate? if it’s an easy answer that would be helpful… I will look into the ‘native’ solutions you recommend :slight_smile:

Kevin

Yes, WF updated some of the UI since this video was created, you should still be able to follow the tutorial.

If you can’t find a certain thing or step, just ask :slight_smile:

@kevin_keiper I just checked both videos, the only thing that outdated, is the “Style Tab” , interactions are the same! You will have no problem :slight_smile:

I think I figured it out

1 Like

Actually my solution does not work, do you have a solution for finding and selecting elements like small icon font elements which you need to toggle visibility for in certain contexts but differently in others. Can you please help?

Do you need to work with external fonts? I very much prefer using svg’s as icons, yielding much smaller imports.

Can you describe on which conditions you need to toggle visibility? Why did the accordion solution not work for you? Your original question only consisted of basic accordion features.

If you can refrain from using “live” manipulation of the DOM, you should.