Skip to content

Instantly share code, notes, and snippets.

@hmbashar
Created October 12, 2025 17:02
Show Gist options
  • Select an option

  • Save hmbashar/d8ac519d855219167714c3e5dbd39a8d to your computer and use it in GitHub Desktop.

Select an option

Save hmbashar/d8ac519d855219167714c3e5dbd39a8d to your computer and use it in GitHub Desktop.
Elementor Container clickable when you add an attribute like url|https://www.bashardev.me/power/solar-panel/ in Advanced → Attributes.
<script>
(function () {
function isInEditor() {
return document.body.classList.contains('elementor-editor-active');
}
function applyClickableContainers(context) {
var nodes = (context || document).querySelectorAll('.elementor-element[url]');
nodes.forEach(function (el) {
if (el.dataset._clickBound) return; // prevent double binding
el.dataset._clickBound = '1';
var href = el.getAttribute('url');
if (!href) return;
// Basic a11y + UX
el.style.cursor = 'pointer';
el.setAttribute('role', 'link');
if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
function go(e) {
// Don’t hijack native links or buttons inside
if (e && e.target && e.target.closest('a, button, [role="button"]')) return;
// allow Ctrl/Cmd to open new tab
var newTab = e && (e.ctrlKey || e.metaKey);
var target = el.getAttribute('target') || (newTab ? '_blank' : '_self');
var rel = el.getAttribute('rel') || (target === '_blank' ? 'noopener noreferrer' : '');
if (target === '_self') {
window.location.href = href;
} else {
var w = window.open(href, target);
if (w && rel) try { w.opener = null; } catch (_) {}
}
}
el.addEventListener('click', function (e) {
if (isInEditor()) return;
go(e);
});
el.addEventListener('keydown', function (e) {
if (isInEditor()) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
go(e);
}
});
});
}
// Run on load
document.addEventListener('DOMContentLoaded', function () {
if (!isInEditor()) applyClickableContainers(document);
});
// Also run when Elementor renders widgets dynamically
if (window.elementorFrontend && elementorFrontend.hooks) {
elementorFrontend.hooks.addAction('frontend/element_ready/global', function ($scope) {
if (!isInEditor()) applyClickableContainers($scope && $scope[0]);
});
}
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment