Show and hide elementor containers using buttons and JavaScript.
Rate this tutorial
Show and hide elementor containers using buttons and JavaScript.
No Additional CCS Required other than CSS class names
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.button').each(function(i){
$(this).click(function(){ $('.container').eq(i).toggle();
$('.button');
}); });
}); });
</script>
<style>
.button{
cursor: pointer;
}
.container{
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.button1').each(function(i){
$(this).click(function(){ $('.container1').eq(i).toggle();
}); });
}); });
</script>
<style>
.button1{
cursor: pointer;
}
.container1{
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.button2').each(function(i){
$(this).click(function(){ $('.container2').eq(i).toggle();
$('.container3').eq(i).hide();
}); });
}); });
</script>
<style>
.button2{
cursor: pointer;
}
.container2{
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.button3').each(function(i){
$(this).click(function(){ $('.container3').eq(i).toggle();
$('.container2').eq(i).hide();
}); });
}); });
</script>
<style>
.button3{
cursor: pointer;
}
.container3{
display: none;
}
</style>