Swapping two sections on click (Good for translations or swapping images, etc.)

THE BUTTONS  

Button 1

ID = show_01

class = our_nav

Button 2

Button 2 = show_02

class = our_nav

(Repeat for as many buttons as you need.)

THE SECTIONS

Section 1 

ID = 01

class = changing_image 01

Section 2

ID = 02

class = changing_image hidden 02

(hidden is so this image is hidden on page load.)

THE CODE SNIPPET

Code Snippet = css

Any element with class of ".hidden" will be hidden on the site, but only faded in the Elementor workspace so they're easier to work with.

body:not(.elementor-editor-active) .hidden {

    display: none;

}

.elementor-editor-active .hidden {

    opacity: 0.6;

}

Code Snippet = jquery

This function will make the selected section class visible, and hide all other items with class ".changing_image" Repeat for as many sections as needed in correlation with buttons above.

<script>

jQuery(document).ready(function() {

jQuery("#show_01").click(function() {

jQuery(".changing_image").hide()

jQuery(".01").show();

});

jQuery("#show_02").click(function() {

jQuery(".changing_image").hide()

jQuery(".02").show();

});

});

</script>