Click to show
Inner Section Class .showclick0
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Inner Section Class .showclick1
This is the heading that shows in the .showclick1 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick1 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick1 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('.clicktoshow0 .elementor-button').each(function(i) {
$(this).click(function() {
$('.showclick0').eq(i).show();
$('.showclick1').eq(i).hide();
$('.showclick1').hide();
$('.clicktoshow0').addClass("active");
$('.clicktoshow1').removeClass("active");
});
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('.clicktoshow1 .elementor-button').each(function(i) {
$(this).click(function() {
$('.showclick1').eq(i).show();
$('.showclick0').eq(i).hide();
$('.showclick0').hide();
$('.clicktoshow1').addClass("active");
$('.clicktoshow0').removeClass("active");
});
});
});
});
</script>
<style>
.clicktoshow0 .elementor-button, .clicktoshow1 .elementor-button {
cursor: pointer;
}
.showclick1 {
display: none;
}
.active .elementor-button {
background-color: red !important;
}
</style>
Hover to show
Inner Section Class .showhover0
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Inner Section Class .showhover2
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick0 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Inner Section Class .showhover1
This is the heading that shows in the .showclick1 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick1 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading that shows in the .showclick1 class inner section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('.hovertoshow0 .elementor-button').each(function(j) {
$(this).hover(function() {
$('.showhover0').eq(j).show();
$('.showhover1').eq(j).hide();
$('.showhover2').eq(j).hide();
}, function() {
$('.showhover0').eq(j).show();
});
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('.hovertoshow1 .elementor-button').each(function(j) {
$(this).hover(function() {
$('.showhover1').eq(j).show();
$('.showhover0').eq(j).hide();
$('.showhover2').eq(j).hide();
}, function() {
$('.showhover1').eq(j).show();
});
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('.hovertoshow2 .elementor-button').each(function(j) {
$(this).hover(function() {
$('.showhover2').eq(j).show();
$('.showhover1').eq(j).hide();
$('.showhover0').eq(j).hide();
}, function() {
$('.showhover2').eq(j).show();
});
});
});
});
</script>
<style>
.showhover1, .showhover2 {
display: none;
}
</style>
