How to Show and Hide Containers with Clicking Buttons - Elementor Wordpress Tutorial
ฝัง
- เผยแพร่เมื่อ 4 ก.ย. 2024
- Updated Video with how to reveal Containers when you click on a button.
Code comes from: element.how/el...
Book your 1-2-1 Consultation: websquadron.co...
How to Show and Hide Containers with Clicking Buttons - Elementor Wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your TH-cam Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk
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!
hello I have a question where to set toggleElem for the button and toggleContent for the Container thx for your help
@@omat1000 these are the class names that go on these elements, under Advanced > CSS classes
Thank you for this! Guys just set the button CSS class to ''toggleElem'' and container to ''toggleContent''. Shame author does not care to pin this comment..
hero you save my life men
thanks for the video, master!!!!
Thank you man!. I am your new subscriber now
Thanks man!, I become addicted to your channel, I always find the answer to my problems in your channel
❤️ From Egypt
Thank you very much for providing the free code, this solved my problem.
Excellent! Thanks for sharing and such a good explanation! You deserve a like
Blessings from Argentina.
Thanks
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!
Not sure why it wouldn’t.
Thanks a lot !!
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?
Are you getting any JS issues when you inspect?
Hey Imran, thank you fro taking the time to respond. Appreciate it! I found the problem, it was a z-index issue blocking "actions" due to the overlay. @@websquadron
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
Not sure if that would work as it’s dependent on the placement but I suppose it could be modified
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.
Not completely sure about if it will work
I have two images side by side in a container that is set for row. It looks perfect in the builder window but when I run it as a preview, the two images are stacked vertically. Any idea why this would be happening?
I made the next section a grid instead of a flex and it worked.
Nice. Thank you Imrran
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.
Because the code is created by someone else and out of respect and agreement with them, I added a link back to them. It was a mutual agreement :)
Thank you, Boss
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.
Technically yes by adding fade in and fade out based on the Section/Container Scrolling Effects.
Go to the advanced tab.
Then motion effects.
Then modify the Fade in and Fade out.
@@websquadron Thank you very much for your reply. I think those steps are at a level beyond my knowledge at the moment. I will investigate.
I think this topic and your explanation can serve you for an upcoming tutorial that, surely, those of us who are part of your community will appreciate.
Excellent content :)
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?
Inspect it and get the class name.
Maybe try:
a:active {
background-color: yellow;
}
Good luck.
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?
Might not work due to the extra JS.
But you could have a button in the pop up open another pop up (and the setting would close the last pop up automatically)
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.
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?
The page will still show the keywords as they’re part of the html and will be present in the sitemap so it’s fine
@@websquadron Perfect :) Thank you so much for clarifying
@@websquadron You 100% sure ? Not better to have different container like in your 2nd example on your demo site ?
Hi! The code in the page is different of the code on the video. How can I fin the code of the video? Thanks!!
Use the link for the final code
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 ??
Might need to double check what you have - but that's 1-2-1 consultation.
Great vid! Is there a way to do that on hover, instead of on click?
Would it be sequential (hover 1 that leads to hover 2 that leads to hover 3) or just a single point whereby you hover to see one item.
@@websquadron Sequentially would be awesome
It was simple to implement and worked great but with one exception. If any popup on the page is initiated first then the button will not work. If you first click the button then the container will show but if you then click and initiate a popup the button no longer closes the container. So at least in my case a popup button kills it.
Multiple JS can do that :(
What if I don't want to pay for Elementor and just use Wordpress?
Adapt the code for that :)
Can this be used to show or hide custom html like an ?
Yes if it’s inside a container
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
Any reason why the pop up solution wasn’t right
@@websquadronHello!! Thx for reply. The reason why was the underneath site scroll which wasn’t disabled, although I’ve blocked it in the advanced tab (pop). So on the pop-up never stay in its place beside the image where I would need it…
There was a conflict in between a smooth scroll js for the page and the pop-up. But i do need absolutely that js for smooth scrolling....for now i could achieve the issue with the show/hide js from element.how
good
This does not work. "Showme" must be outdated for the code provided as it is not in there.
Rename it to match the names you give.
Couldn't this be now done with the new nested tabs widget? 🤔
Yup if you want the tabs ;)
This is the alternate way with buttons or even icons.
does it work with sections?
The page has code for Sections or Containers :)
Did anyone get this working with inner containers??
HEY IT´S NOT POSSIBLE TO ACCES THE CODE GIVES ERROR 403!
I just clicked the link and it went straight there. Change your browser
does not work
It does for me and others, sorry.
Imran, I'm sure you've been spying on me!! I've been trying to solve this exact problem in Bricks. Any reason why this wouldn't work in Bricks?
It'll be the code that is using Elementor Container IDs.
When I get a chance I'll dig into a Bricks Version.
@@websquadron Thank you
Confusing and large explanation...
Ok
The website to get the code is a scam! Beware.
No it’s not.
Element.How is a very respected website.
How is it a scam?
I got the code and directions from the site with no issues. Not a scam.
same here. no scam at all. I did have to register/login to reveal it, but given that they provide you a valuable free resource, I think it's very much ok. If that was your classification of "scam" at least.