HTML and Block Content

<a href="/myLink1.html" target="_blank" class="pad-vert-1x container-fluid btn btn-cta btn-block border-radius-x" onclick="DealerOnTrack.event('Countdown Timer Block','click',window.location.href)">
<div id="countDown" class="countDown text-center">
<div class="row">
<div class="col-sm-12">
<h2 class="margin-top-x">
Countdown to Sale Event Heading
</h2>
</div>
</div>
<ul class="list-unstyled list-inline margin-x">
<li>
<div id="days" class="heading-xl margin-x"></div>
<div class="text-uppercase"><small>Days</small></div>
</li>
<li>
<div id="hours" class="heading-xl margin-x"></div>
<div class="text-uppercase"><small>Hours</small></div>
</li>
<li>
<div id="minutes" class="heading-xl margin-x"></div>
<div class="text-uppercase"><small>Minutes</small></div>
</li>
<li>
<div id="seconds" class="heading-xl margin-x"></div>
<div class="text-uppercase"><small>Seconds</small></div>
</li>
</ul>
</div>
</a>

<div id="defaultBonusBlock" class="container-fluid bg-cta" style="display: none;">
<div class="row text-center pad-vert-2x">
<div class="col-sm-12">
<h2 class="margin-x">
Countdown End Heading Text Here
</h2>
<a href="myLink2.html" class="btn btn-main margin-top-1x">CTA Link</a>
</div>
</div>
</div>

Countdown Timer Script

This portion contains the script that makes the timer work. In this, set the date and also determine whether to have the countdown be replaced by the new code section once the timer reaches zero.

<script type="text/javascript" defer>
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
/* Set the date here. You may need to adjust it to account for time zone differences. */
let countDown = new Date('Oct 1, 2020 12:06:00').getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
/* Set to false if you don't want the countdown to go away after it ends. */
autoReplace = true;
if (distance < 0 && autoReplace) {
document.getElementById('countDown').setAttribute("style", "display:none;");
document.getElementById('defaultBonusBlock').setAttribute("style", "display:block;");
} else if (distance < 0 && autoReplace = false)
document.getElementById('days').innerHTML = Math.floor(distance / (day)),
document.getElementById('hours').innerHTML = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerHTML = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerHTML = Math.floor((distance % (minute)) / second);
}, second)
</script>

Separate background colors for the heading and body

<a role="button" data-toggle="collapse" href="#bonusBlockCollapse" aria-expanded="false" aria-controls="bonusBlockCollapse">
<div class="container-fluid pad-vert-1x bg-main">
<div class="row margin-x text-center text-white">
<div class="col-xs-12">
Heading Content Here
</div>
</div>
</div>
</a>
<div class="collapse" id="bonusBlockCollapse">
<div class="container-fluid border-x bg-cta">
<div class="container">
<div class="row margin-x text-white pad-vert-1x">
<div class="col-xs-12">
Body Content Here
</div>
</div>
</div>
</div>
</div>

Separate background colors for the heading and body; Body content visible by default

<a role="button" data-toggle="collapse" href="#bonusBlockCollapse" aria-expanded="true" aria-controls="bonusBlockCollapse">
<div class="container-fluid pad-vert-1x bg-main">
<div class="row margin-x text-center text-white">
<div class="col-xs-12">
Heading Content Here
</div>
</div>
</div>
</a>
<div class="collapse in" id="bonusBlockCollapse" aria-expanded="true">
<div class="container-fluid border-x bg-cta">
<div class="container">
<div class="row margin-x text-white pad-vert-1x">
<div class="col-xs-12">
Body Content Here
</div>
</div>
</div>
</div>
</div>