How to Show and Hide Containers with Clicking Buttons - Elementor Wordpress Tutorial

Updated Video with how to reveal Containers when you click on a button.

How to Show and Hide Containers with Clicking Buttons - Elementor Wordpress Tutorial

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[HossamKhalaf-sroo]

Thanks man!, I become addicted to your channel, I always find the answer to my problems in your channel
❤️ From Egypt

[slhdono]

Thank you very much for providing the free code, this solved my problem.

[febrisadhayaga]

Thank you man!. I am your new subscriber now

[virginiaciancia]

Excellent! Thanks for sharing and such a good explanation! You deserve a like

Blessings from Argentina.

[antoniorodriguezvasquez]

Hey there! Looks like the author of the code updated it, now you need to set toggleElem for the button and toggleContent for the Container. Thanks for the Video!

[JeffNeukom]

Great video! Very helpful for visual learners like myself.

Do you think this could be made to work within a popup? For some reason, when it's in a popup, the second section doesn't appear when clicked, though I tested the same layout on a page and it worked. Does the script need to be tweaked to suit a popup vs living on a page?

[riposte]

This is awesome. Thanks man. Now, I would like to use this pretty much as an "advanced" accordions, so I would need to put this within a parent container. Any idea why when it's in another container it doesn't work? Thanks again!

[patrissalehi]

Amazing video and thank you so much ❤.
A question about the Java Script code: is it possible to add the code to the child theme function.php folder and use it for different sections or pages?
Thanks

[vinsonlozano]

Thank you so much for sharing this awesome tutorial. Is there a way to use the same toggle function to a crocoblock apply filter button? When a user hit the apply filter button a section will collapse. I have tried adding the css class, but it didn't work.

[ggiavasis]

Any advice on some code that will change the style of the active button?
Let's say all the buttons were in a row at the top, and each button would reveal one item below and hide the others. How could we style the active button?

[wellpal]

truly love your content and easy breakdown of "mental models" when it comes to Elementor. Helped me a lot in applying the basic instruction to more custom scenarios.

With this specific piece of code I seem to run into the following issue: When all is applied and I check the preview is works flawlessly. When I refresh the page to show it again, the button click doesn't reveal anything (inactive). After waiting a while or making adjustments on the page in elementor view and updating, the function works again. And so on... IS there maybe something I'm overlooking?

[vekenbakrad]

Thank you for the amazing video. QUESTION: Is this SEO friendly? Will the page rank if you had certain texts hidden? Or should we submit a sitemap to google for ranking? what is your recommendation?

[namanjain]

I followed all the steps properly but not getting the results.

Let me tell you steo by step & there’ll be any issue kindly help me then.

1- I added first main container
2- In that main container i added
a) html widget
b) button widget(css class: toggleElem)

3 then i added second container with(css class: togglecontent)
4 In that second container i just added 1 image that’s it.
5 then in responsive i marked second container to hide on all three devices.

But still when i click on the button nothing happens.

Please help ??

[giardi]

the code in the link is changed, you need to set the button css class to "toggleElem" for the button and "toggleContent" for the container want to show/hide.

[carolinaurrutia]

Hi, is it possible to show and hide sections or containers by scrolling down and scroll up?
Your channel is a great help to the Elementor community.
Regards.

[LouOficial]

Hi! The code in the page is different of the code on the video. How can I fin the code of the video? Thanks!!

[dogsauce]

Can this be used to show or hide custom html like an iframe?

[corinagrether]

Hi Imran I would like to achieve the same with a container sliding in from right to left on a button click (horizontally). I've tried the pop-up solution but it's not the right thing to do...any advice? THX

[garycannon]

Did anyone get this working with inner containers??

[mikedebest]

You are great. But I don't understand why you do not post the code in the comments. It is impossible to find with the link that you provided.