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 will provide you with a detailed guide to achieve this without using any additional plugin, but rather 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 in which 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 have used an image.
-Assign a Class or ID: To facilitate manipulation through JavaScript, assign a class or ID to the container that contains 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.
-Configure the Counter: Define the date and time when 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
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 execute.
-Insert the JavaScript Code: Copy and paste the necessary JavaScript code into the HTML widget. You can acquire the code at the end of this article.
-Save and Update: Make sure you save your changes and refresh your page for the code to take effect.
Verifying the Result
Now that you've set everything up, it's time to check if the content is hidden correctly when the counter reaches zero. Simply watch the counter and see if the content disappears when the set time and date is reached.
Conclusion
We hope this tutorial helped you understand how to hide content using the Elementor Countdown widget and JavaScript. If you find this guide useful, don't hesitate to like it 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! See you later.
