Click Button to Change Image And Text Using Elementor

Heading 1

Heading 2

Heading 3

Heading 4

alt="Auto Play Video On Hover"
alt="Add A Subdomain In Cpanel" alt="namehero"
alt="glowing text"
alt="Magnifying Image Zoom Effect"

Text 1

Text 2

Text 3

Text 4

Button CSS ID:

				
					CSS ID: button1
				
			

Image CSS ID And Class Name:

				
					CSS ID:       img1
CSS Classes:  hidden-image

				
			

Text CSS ID And Class Name:

				
					CSS ID:      text1
CSS Classes: hidden-text

				
			

Heading CSS ID And Class Name:

				
					CSS ID:      heading1
CSS Classes: hidden-heading

				
			

HTML Code:

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
  $("#button1").click(function() {
    $("#h1").show();
    $("#h2").hide();
    $("#h3").hide();
    $("#h4").hide();
    $("#img1").show();
    $("#img2").hide();
    $("#img3").hide();
    $("#img4").hide();
    $("#text1").show();
    $("#text2").hide();
    $("#text3").hide();
    $("#text4").hide();
  });
  $("#button2").click(function() {
    $("#h1").hide();
    $("#h2").show();
    $("#h3").hide();
    $("#h4").hide();
    $("#img4").hide();
    $("#img3").hide();
    $("#img2").show();
    $("#img1").hide();
    $("#text1").hide();
    $("#text2").show();
    $("#text3").hide();
    $("#text4").hide();
  });
  $("#button3").click(function() {
    $("#h1").hide();
    $("#h2").hide();
    $("#h3").show();
    $("#h4").hide();
    $("#img4").hide();
    $("#img3").show();
    $("#img2").hide();
    $("#img1").hide();
   $("#text1").hide();
   $("#text2").hide();
   $("#text3").show();
   $("#text4").hide();
  });
  $("#button4").click(function() {
    $("#h1").hide();
    $("#h2").hide();
    $("#h3").hide();
    $("#h4").show();
    $("#img4").show();
    $("#img3").hide();
    $("#img2").hide();
    $("#img1").hide();
   $("#text1").hide();
   $("#text2").hide();
   $("#text3").hide();
   $("#text4").show();
  });
  
  
});

jQuery(document).ready(function($) {
  $('.hidden-text').hide();
  $('button').click(function() {
    $('#hidden-text-container .hidden-text').show();
  });
});

jQuery(document).ready(function($) {
  $('.hidden-image').hide();
  $('button').click(function() {
    $('#hidden-image-container .hidden-image').show();
  });
});

jQuery(document).ready(function($) {
  $('.hidden-heading').hide();
  $('button').click(function() {
    $('#hidden-heading-container .hidden-heading').show();
  });
});


</script>