Show and Hide containers on click in Elementor | Detailed Explainer

In this video, I teach you how to show and hide containers on click. I do this in the simplest way for you to understand and write jQuery code from
scratch.
Source code:
urielsoto.com/...
Download the website shown in the video:
urieljsoto.gum...
🟢 Email Technical Support:
urieljsoto.gum...
🔵 Video Call Technical Support:
urieljsoto.gum...
🔴 Download My Custom Templates:
urieljsoto.gum...
🔵 Join Our Facebook Community!
bit.ly/urielsot...
🟢 My Web Agency:
vluxdesigns.com/
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielele...
CONTACT ME:
My Website: urielsoto.com/​
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a

[@stephanelhuile9091]

Thank you very much for this tutorial. Thanks to it, I was finally able to make a carousel of 12 buttons that display different content depending on the button clicked. Thank you very much because I didn't understand the importance of hiding the containers!

[@outuvcontext]

I want to do something similar and have been searching for days thank you

[@YOgooshusWHAT]

Is there a script to hide all content besides the content activated by the button or do you have to input all 11 other containers of content to hide on every button?

[@Badrogaga-d1o]

you are the best on youtube about wordpress thank you!!

[@gustavomedina2224]

Nice brooo! I needed this for new containers, amazing!

[@anushasreerama4683]

Does this code need to add any plugin to support the code....?when I am using the code I am getting nothing

[@gustavodias1936]

me too

[@gaeldouay]

me too...

[@Zettabyte-Own]

document.addEventListener('DOMContentLoaded', function() {
// Button Variables
const greatBtn = document.querySelector('.great-btn');
const badBtn = document.querySelector('.bad-btn');

// Container Variables
const rateBox = document.querySelector('.rate-container');
const greatBox = document.querySelector('.great-container');
const badBox = document.querySelector('.bad-container');
// Ensure that rateBox is always visible
if (rateBox) rateBox.style.display = 'block';
// Show the great form and hide the bad form
if (greatBtn) {
greatBtn.addEventListener('click', function() {
if (greatBox) {
greatBox.style.display = 'block';
}
if (badBox) {
badBox.style.display = 'none';
}
});
}
// Show the bad form and hide the great form
if (badBtn) {
badBtn.addEventListener('click', function() {
if (badBox) {
badBox.style.display = 'block';
}
if (greatBox) {
greatBox.style.display = 'none';
}
});
}
});

[@UserOne-ip3jt]

Thanks dude! Great tutorial

[@PrakashSahw-vr6bm]

I just created 2 sets of buttons and conatiners one for desktop and one for mobile but the issue is only works at a time. How to fix ??

[@luigiiuliano139]

Hi , everything is working perfectly inside the editor but in frontend the script is not working, do you know any solutions? Thanks for the time.

[@hichemamarbensaber6239]

Good job, the only issue (display: none) will make the element not visible, in fact both forms are in the DOM tree, so it's easy for an user to display both form from the navigator :(

[@nurshahirahazahari4563]

thankyouu. your tutorial help me a lot

[@MahdiAsefi-j6d]

Thanks man ❤

[@olarewajuoluwaseyifunmi6065]

Thanks for the video Uriel, that was really helpful on my website I am currently working on.
However, a quick question I will like to ask is, what code can I use to close the hide the container back after another click. I do not want it to be open and I do not want to hide the icon. How do I make the animation close back on another click.
I look forward to your response Uriel, thanks

[@BrefMcHugh]

AWESOME video

[@BradEdwards-xj1sl]

Big Fan of your videos! Need some help with GSAP and Elementor? Can I mail you?

[@deanbirinyi2436]

It works great. It's just what I needed to showcase my 10 different services without having a "wall of text" on the page. ¡Gracias!

[@giosans5345]

really nice. On PC it works perfectly, but not on mobile.
I read online that a Touch or TouchStart function should also be implemented, but nothing works.

[@Flinkierownikosiedla]

this code does not work

[@Zettabyte-Own]

document.addEventListener('DOMContentLoaded', function() {
// Button Variables
const greatBtn = document.querySelector('.great-btn');
const badBtn = document.querySelector('.bad-btn');

// Container Variables
const rateBox = document.querySelector('.rate-container');
const greatBox = document.querySelector('.great-container');
const badBox = document.querySelector('.bad-container');
// Ensure that rateBox is always visible
if (rateBox) rateBox.style.display = 'block';
// Show the great form and hide the bad form
if (greatBtn) {
greatBtn.addEventListener('click', function() {
if (greatBox) {
greatBox.style.display = 'block';
}
if (badBox) {
badBox.style.display = 'none';
}
});
}
// Show the bad form and hide the great form
if (badBtn) {
badBtn.addEventListener('click', function() {
if (badBox) {
badBox.style.display = 'block';
}
if (greatBox) {
greatBox.style.display = 'none';
}
});
}
});

[@SatnamSadeora]

Hi, I am not able to add "Show more/Less" button to the Grid using Generate Press Themes/Generate Blocks Plugin. I have created a Grid to showcase some 20 products, out of which I only want to show 5 at the begnining unless a customer clicks on "Show More" button to reveal the all in the list. Have been searching for the solution for the past 3 days, but in vain. I am not a techie hence finding it very difficult to solve the issue. Is there any wayout? Thanks......

[@nmdk-design]

You are awesome!
This video helped me a lot. Thank you!

[@salesbushehrimohammad]

This tutorial was wonderful

[@meisterleise]

Thank you! Especially for explaining the code. One thing: I'm missing animations for the show and hide. Without animation it can be difficult for the visitor to understand what is happening.

[@fedea8489]

any way to add animation?

[@superboy1661]

This code does not work. It only works in elementor preview or in elementor. When I go to normal or go on my phone it doesn’t work.

[@Zettabyte-Own]

document.addEventListener('DOMContentLoaded', function() {
// Button Variables
const greatBtn = document.querySelector('.great-btn');
const badBtn = document.querySelector('.bad-btn');

// Container Variables
const rateBox = document.querySelector('.rate-container');
const greatBox = document.querySelector('.great-container');
const badBox = document.querySelector('.bad-container');
// Ensure that rateBox is always visible
if (rateBox) rateBox.style.display = 'block';
// Show the great form and hide the bad form
if (greatBtn) {
greatBtn.addEventListener('click', function() {
if (greatBox) {
greatBox.style.display = 'block';
}
if (badBox) {
badBox.style.display = 'none';
}
});
}
// Show the bad form and hide the great form
if (badBtn) {
badBtn.addEventListener('click', function() {
if (badBox) {
badBox.style.display = 'block';
}
if (greatBox) {
greatBox.style.display = 'none';
}
});
}
});