In this tutorial, I’ll show you how to use a Click ID in Elementor to change a section’s background image dynamically. With a few lines of custom JavaScript and the right selectors, you can swap backgrounds on click without any extra plugins. The full code example is included below so you can copy, paste, and customize it for your own layout.
<script>window.addEventListener('DOMContentLoaded', function() {
jQuery(document).ready(function($) {
// Define an object with tab IDs and corresponding image URLs
const backgrounds = {
'#moj1': 'https://www.demo.carbonweb.co/wp-content/uploads/2024/11/card-graphic.svg',
'#moj2': 'https://www.demo.carbonweb.co/wp-content/uploads/2024/10/Frame-1261162052-2.png',
'#moj3': 'https://www.demo.carbonweb.co/wp-content/uploads/2024/09/Frame-1261162340.png',
'#moj4': 'https://www.demo.carbonweb.co/wp-content/uploads/2024/09/section-1.svg'
};
// Attach a click event to each tab
$.each(backgrounds, function(tabId, imageUrl) {
$(tabId).on('click', function() {
// Change the background image of the section with ID #arif_wrap
$('#moj_wrap').css('background-image', url(${imageUrl}));
});
});
});
});</script>
