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:

Download the website shown in the video:

🟢 Email Technical Support:

🔵 Video Call Technical Support:

🔴 Download My Custom Templates:

🔵 Join Our Facebook Community!

🟢 My Web Agency:

PRODUCTS I USE FOR MY WEBSITES:

🔴 Get Elementor Pro - My Favorite Page Builder

CONTACT ME:

[deanbirinyi]

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!

[stephanelhuile]

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!

[Badrogaga-do]

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

[gustavomedina]

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

[nmdk-design]

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

[PrakashSahw-vrbm]

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

[nurshahirahazahari]

thankyouu. your tutorial help me a lot

[olarewajuoluwaseyifunmi]

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

[anushasreerama]

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

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

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

[giosans]

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.

[stephanierebel-energyinflu]

Can you tell me how to use customized for if you don’t have element or pro? I tried by myself but it didn’t work.

[hichemamarbensaber]

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

[luigiiuliano]

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.

[BradEdwards-xjsl]

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

[superboy]

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.