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>
One Response
You’ve made some good points there. I checked on the web for more information about the issue and found most people will go along with your views on this web site.