Click Button to Change Image And Text Using Elementor
Remember to watch the video or read the article on how to make this work You do have to add classnames and CSS ids for every button, image and text block added to the page if you want it to work as intended.
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>
