Show and Hide containers on click in Elementor | Detailed Explainer
Vložit
- čas přidán 5. 09. 2024
- 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
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!
I want to do something similar and have been searching for days thank you
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?
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!
you are the best on youtube about wordpress thank you!!
You are awesome!
This video helped me a lot. Thank you!
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 ??
This tutorial was wonderful
Thanks dude! Great tutorial
Nice brooo! I needed this for new containers, amazing!
Thanks man ❤
thankyouu. your tutorial help me a lot
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.
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.
any way to add animation?
Does this code need to add any plugin to support the code....?when I am using the code I am getting nothing
me too
me too...
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';
}
});
}
});
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 :(
AWESOME video
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
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......
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.
Big Fan of your videos! Need some help with GSAP and Elementor? Can I mail you?
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.
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';
}
});
}
});
this code does not work
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';
}
});
}
});