Skip to content

Snippets / JS

JS

Hide the Container which have the related places or posts if there is no posts in the vx postfeed widget

M medodoha84 · 148 views · Updated 1 year ago
This snippet hides the container which has the vx postfeed widget if there are no related posts displayed.
You can use free elementor html widget to use this snippet. Don't forget to add "related-places" css class to the container which have the postfeed widget. You can change the css class as you need but don't forget to change it in the js code snippet.
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
// Find the container with the "related-places" class
const relatedPlacesContainer = document.querySelector('.related-places');

if (relatedPlacesContainer) {
// Find the post feed widget inside the container
const postFeedWidget = relatedPlacesContainer.querySelector('.elementor-widget-ts-post-feed');

if (postFeedWidget) {
// Check if the post feed grid is empty (has no child elements besides the no-results message)
const feedGrid = postFeedWidget.querySelector('.post-feed-grid');
const noResultsElement = postFeedWidget.querySelector('.ts-no-posts');

// Check if the feed is truly empty - both conditions must be true:
// 1. The no-results element must exist
// 2. The feed grid must have no direct children OR only have the no-results class
if (noResultsElement && 
(feedGrid.children.length === 0 || 
(feedGrid.classList.contains('post-feed-no-results') && !feedGrid.querySelector(':scope > *')))) {
// Hide the entire container
relatedPlacesContainer.style.display = 'none';
}
}
}
}, 700); // Increased delay to ensure content is fully loaded
});
</script>
JS · 29 lines

Discussion

Ask a question or share how you used this.

Log in to join the discussion.

No comments yet — be the first.

Voxel Guide assistant
Ask about snippets, addons & how-tos

Hey — how can I help?

I can dig through the library for snippets, addons, and tutorials.

AI can be wrong — double-check anything important.