loader image

Button Triggered Containers

Button Triggered Containers

Show and hide elementor containers using buttons and JavaScript.

Rate this tutorial

Template Example

CSS Class .container - Default Container

Container 1

View & Select Container 2

View & Select Container 3

Container 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Container 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CREDIT Web Squadron / Rob Edge
CSS NEEDED

No Additional CCS Required other than CSS class names

HTML NEEDED

<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>

robedge.com | mt irvine tobago w.i. | 868.276.2665 | robedge@gmail.com