The
Lab

Test libraries, replacement codes, and more here.

Call Directions

Show/Hide Content by Time & Date

About

See additional guides:

This is a variation on the countdown timer which can be used to show or hide large amounts of page content based on a specified date and time. This is ideal for promotions and specials that become available at a certain time, such as a spring sale starting on Sunday at 8am, when someone might not be available to push changes live themselves.

The content is swapped via a script and the usage of two classes: .prepromoContent and .promotionContent. When added to elements or containing <div>s, these classes do the following:

  • .prepromoContent — displays on page load and is hidden once the timer ends.
  • .promotionContent — hidden on page load and is revealed once the timer ends.

Note that this should be treated as a placeholder: once the timer has run out, the page content should be revised as soon as someone is available to clean up the code and leave the new content in place.

If changes need to go live on one date/time, then be reverted at another, all that needs to be done is for the classes .prepromoContent and .promotionContent to be swapped.

Because it is coded with JavaScript as opposed to jQuery, the entire contents of the code can be added to any page block or editable content section by any user role without requiring custom code access.

Back to top

Display

Below you can see how the countdown block will display before and after the timer runs out.

Main section

This section remains the same.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium voluptatem accusamus earum distinctio explicabo corrupti fuga vero, inventore, et optio, delectus nostrum consequatur reiciendis. Dignissimos, facilis. Laborum nisi quo accusamus?

This is going to change.

This content will go away when the timer runs out.

Frankly

This is the original content.

This will go away soon.

Frankly

Main section

This section remains the same.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium voluptatem accusamus earum distinctio explicabo corrupti fuga vero, inventore, et optio, delectus nostrum consequatur reiciendis. Dignissimos, facilis. Laborum nisi quo accusamus?

This content is here now.

The timer ran out, so here we are.

Slayer

This is the new content.

It's displaying because the timer ran out.

Frankly

Back to top

Demo

Below is an example of how this widget displays. If the content has already updated, click the button to reset the timer.

Time Remaining:
days, hours, minutes, seconds

Time Up

Main section

This section remains the same.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium voluptatem accusamus earum distinctio explicabo corrupti fuga vero, inventore, et optio, delectus nostrum consequatur reiciendis. Dignissimos, facilis. Laborum nisi quo accusamus?

This is going to change.

This content will go away when the timer runs out.

Frankly

This is the original content.

This will go away soon.

Frankly

Code Snippet

Click below to copy the code snippet to your clipboard.

Back to top

<!-- Content to show before timer runs out -->
<div class="prepromoContent">
	<h1>Old content</h1>
</div>
<!-- Content to show once timer runs out -->
<div class="promotionContent">
	<h1>New content</h1>
</div>
<script>
let countDown = new Date('Jun 17, 2021 11:20:00').getTime(),
	timeAtLoad = new Date().getTime(),
	remainingTimeAtLoad = countDown - timeAtLoad,
	promoContent = Array.prototype.slice.call(document.getElementsByClassName('promotionContent')),
	prepromotionContent = Array.prototype.slice.call(document.getElementsByClassName('prepromoContent'));
function applyToAll (className, functionName) {
	for (var i = 0; i < className.length; i++) {
		functionName(className[i]);
	}
}
function showAll (elm) {
	elm.setAttribute('style', 'display: block;');
}
function hideAll (elm) {
	elm.setAttribute('style', 'display: none;');
}
function removeAll (elm) {
	elm.remove();
}
// logs for debugging - remove before pushing live
const second = 1000,
	minute = second * 60,
	hour = minute * 60,
	day = hour * 24;
console.log('Remaining time at page load: ' + 	Math.floor(remainingTimeAtLoad / day) + ' days, ' + 	Math.floor((remainingTimeAtLoad % day) / hour) + ' hours, ' + 	Math.floor((remainingTimeAtLoad % hour) / minute) + ' minutes, ' + 	Math.floor((remainingTimeAtLoad % minute) / second) + ' seconds.');
// end debug content
// if there are more than 15 minutes before the timer ends, remove the promo content (most user sessions are < 15 mins)
if (remainingTimeAtLoad > 900000) {
	document.getElementsByClassName('promotionContent').remove();
}
// don't bother with the interval if the timer has already run out
else if (remainingTimeAtLoad <= 0) {
	applyToAll(promoContent, showAll);
	applyToAll(prepromotionContent, removeAll);
}
else {
	let x = setInterval(function() {
		let now = new Date().getTime(),
			distance = countDown - now;
		// logs for debugging - remove before pushing live
		console.log('Time remaining: ' + 			Math.floor(distance / day) + ' days, ' + 			Math.floor((distance % day) / hour) + ' hours, ' + 			Math.floor((distance % hour) / minute) + ' minutes, ' + 			Math.floor((distance % minute) / second) + ' seconds.');
		// end debug content
		if (distance < 1000) {
			applyToAll(promoContent, showAll);
			applyToAll(prepromotionContent, hideAll);
			applyToAll(prepromotionContent, removeAll);
			clearInterval(x);
		}
	}, 1000);
}
</script>