Elementor show / hide elements and images on click #NoPlugin

Do you need to create a simple interaction where you show or hide elements on your Elementor website after clicking on another element such as a button or navigation? That is exactly what I am going to explain in the video below.

You can download the demo layout as an Elementor section here. You will still need to include the code mentioned below, it is NOT part of the json file.

Bellow, you will find the CSS and JS code I used in the example:

1. Code snippet for class .hidden that hides elements on the frontend but keeps them shown in the Elementor editor for easier navigation.

body:not(.elementor-editor-active) .hidden {
    display: none;
}

.elementor-editor-active .hidden {
    opacity: 0.6;
}

2. Styling of the navigation.

.our_nav {
    cursor: pointer;
}

.our_nav.my_active {
    text-decoration: underline;
}

3. Final Javascript code including the navigation active class toggling.

<script>
jQuery( document ).ready(function() {
   jQuery( "#show_01" ).click(function() {
  		jQuery(".changing_image").hide();
		 	jQuery("#01").fadeToggle();
		 	jQuery(".our_nav").removeClass("my_active");
		 	jQuery("#show_01").addClass("my_active");
	 });
		
		jQuery( "#show_02" ).click(function() {
  		jQuery(".changing_image").hide();
		 	jQuery("#02").fadeToggle();
			jQuery(".our_nav").removeClass("my_active");
		 	jQuery("#show_02").addClass("my_active");
	 });
		
		jQuery( "#show_03" ).click(function() {
  		jQuery(".changing_image").hide();
		 	jQuery("#03").fadeToggle();
			jQuery(".our_nav").removeClass("my_active");
		 	jQuery("#show_03").addClass("my_active");
	 });
		
		jQuery( "#show_04" ).click(function() {
  		jQuery(".changing_image").hide();
		 	jQuery("#04").fadeToggle();
			jQuery(".our_nav").removeClass("my_active");
		 	jQuery("#show_04").addClass("my_active");
	 });
});
</script>

Update – Vanila Javascript version

In case you cannot or don’t want to use jQuery code, here is a pure Javascript version

<script>
	document.addEventListener("DOMContentLoaded", function(event) {
	
		document.getElementById("show_01").onclick = function(){
			hideAllImages();
			document.getElementById("01").style.display="block";
			removeNavHighlight();
			document.getElementById("show_01").classList.add("my_active");
		};
		
		document.getElementById("show_02").onclick = function(){
			hideAllImages();
			document.getElementById("02").style.display="block";
			removeNavHighlight();
			document.getElementById("show_02").classList.add("my_active");
		};
		
		document.getElementById("show_03").onclick = function(){
			hideAllImages();
			document.getElementById("03").style.display="block";
			removeNavHighlight();
			document.getElementById("show_03").classList.add("my_active");
		};
		
		document.getElementById("show_04").onclick = function(){
			hideAllImages();
			document.getElementById("04").style.display="block";
			removeNavHighlight();
			document.getElementById("show_04").classList.add("my_active");
		};
	});
	
	function hideAllImages() {
		var items = document.getElementsByClassName('changing_image');
		var itemsLen = items.length;
		for(var i = 0; i < itemsLen; i++) {
			items[i].style.display="none";
		}
	}
	
	function removeNavHighlight() {
		var items = document.getElementsByClassName('our_nav');
		var itemsLen = items.length;
		for(var i = 0; i < itemsLen; i++) {
			items[i].classList.remove("my_active");
		}
	}
</script>