If you're wondering how to make certain content hide when the Elementor Countdown widget reaches zero, you've come to the right place. In this article, we'll provide you with a detailed guide to achieve this without using any additional plugins, but through the use of JavaScript. Let's get started!
Introduction
Before we get into the tutorial, we want to thank you for your interest.
The first thing you need to do is create a section where you will put the content that will be hidden when the counter reaches zero. In our case, we will use a simple image as an example. Let's see how to do it:
-Add a Section: Open Elementor and create a new section on your page.
-Add your Content: Insert the content you want to hide in this section. In our example, we used an image.
-Assign a Class or ID: To make it easier to manipulate via JavaScript, assign a class or ID to the container that holds the content you want to hide. In this tutorial, we will use the “hide-content” class.
Inserting the Countdown Widget
Next, we need to insert the Countdown widget on our page. Follow these steps:
-Add the Widget: Find the Countdown widget in Elementor and add it to your page.
-Set the Counter: Set the date and time you want the content to be hidden. This is achieved by setting the end date in the Countdown widget. Make sure it matches your preferences.
Using JavaScript to Hide Content
In order to have the content automatically hide when the counter reaches zero, we need to use JavaScript. Here's how to do it:
-Add an HTML Widget: Insert an HTML widget on your page where you want the JavaScript code to run.
-Insert the JavaScript Code: Copy and paste the required JavaScript code into the HTML widget. You can find the code at the end of this article.
-Save and Update: Make sure to save your changes and refresh your page for the code to take effect.
Checking the Result
Now that you have everything set up, it's time to check if the content is hidden correctly when the counter reaches zero. Simply watch the counter and check if the content disappears when the set time and date are reached.
Conclusion
We hope this tutorial helped you understand how to hide content using the Elementor Countdown widget and JavaScript. If you found this guide helpful, feel free to give it a thumbs up and subscribe to our channel for more tutorials. If you have any questions or comments, feel free to leave them in the comments section. See you in future videos! Bye!
