---
title: "How to Change Website Content When Countdown Timer Ends?"
url: https://theplusaddons.com/docs/change-website-content-when-countdown-timer-ends/
date: 2024-01-17
modified: 2026-08-27
lang: en
author: "Aditya Sharma"
description: "Do you want to swap what a page shows the moment your countdown ends, without redirecting visitors or building a separate template? A sale banner that keeps advertising a discount..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Change-Website-Content-When-Countdown-Timer-Ends_-1024x536.jpg
word_count: 1496
---

# How to Change Website Content When Countdown Timer Ends?

Do you want to swap what a page shows the moment your countdown ends, without redirecting visitors or building a separate template? A sale banner that keeps advertising a discount after the discount is gone, or a normal-price section that stays hidden while an offer is still live, both send the wrong message. Toggling the right section in and out based on the countdown's state keeps the page honest at every moment.

With the Countdown widget from The Plus Addons for Elementor, you can automatically show or hide any section on the page while the countdown runs and after it ends, just by tagging those sections with two CSS class names.

*To check the complete feature overview of The Plus Addons for Elementor Countdown widget, [click here](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/).*

> **Requirement:** This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated to enjoy all its powers.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-countdown-timer/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## What It Does

This feature lets the Countdown widget show or hide other sections on the page based on whether the timer is still running or has already expired. Instead of replacing the countdown itself, it toggles the visibility of any elements you tag with two CSS class names you choose, one for the during-countdown state and one for the after-expiry state.

It works on both the Normal Countdown and the Scarcity (Evergreen) Countdown setups, so any timer on your site can drive this kind of section swap.

## Why It Matters

A lot of countdown-driven pages need more than the timer to change, they need the surrounding content to change with it. A discounted price block, a limited stock banner, or a "hurry, offer ends soon" strip all belong only while the countdown is running. Editing that content by hand at the exact moment a promotion ends is not realistic.

Class Based Section Visibility solves that without a Page Redirect or a saved Elementor template. You tag the two sections once with a class name each, and the widget flips which one is visible every time the countdown state changes.

## What You Get

- A **Class Based Section Visibility** toggle on the Extra Option tab.- A **During Countdown Class** field for the CSS class shown while the timer runs.- An **After Expiry Class** field for the CSS class shown once the timer ends.- Automatic, script-driven toggling between the two, with no page reload.

## Benefits

- **No template or redirect needed:** both sections live on the same page, swapped in place.- **Works on any element:** the two classes can sit on any Container, section, or widget, not just countdown-related content.- **Fully automatic:** the swap happens on its own the instant the timer state changes.- **Reusable:** the same class pair can drive more than one section if you tag more than one element.

## Capabilities

- **Class Based Section Visibility toggle:** available on Normal Countdown and Scarcity (Evergreen) Countdown, for every Countdown Style except Style 3.- **During Countdown Class:** the CSS class applied to the section that should show while the timer is running.- **After Expiry Class:** the CSS class applied to the section that should show once the timer ends.- **Independent of After Expiry Action:** this feature lives on the Extra Option tab and works separately from the Message, Template, and Page Redirect actions on the Special Option tab.

## How It Works

When both the During Countdown Class and After Expiry Class fields are filled in, the widget writes the two class names into a small data attribute on the countdown wrapper. The front-end script reads that attribute and, on every timer tick, looks up the first element on the page carrying each class.

While the countdown is running, the During Countdown Class element is set to display and the After Expiry Class element is hidden. The moment the timer reaches zero, the script flips both, hiding the During Countdown Class element and showing the After Expiry Class element instead.

Because the script looks up elements by CSS class using a single-match lookup, it only ever finds and toggles the first element on the page that carries a given class. If several elements share the same class, only the first one responds.

## How to Use It

Watch the full setup below, or follow the written steps underneath.

https://www.youtube.com/watch?v=RdPTAGc3PMY&t=404s
Countdown widget walkthrough, including the Class Based Section Visibility toggle.

For instance, say you have two pricing sections on a page, one with the offer or discounted price and the other with the normal price.

Two Elementor Containers, one for the offer price and one for the normal price.

Give each Container its own CSS class in its Advanced tab, for example "offer" for the offer pricing section and "normal" for the normal pricing section. These are the class names the countdown widget will look for.

Prefer to swap in custom text instead of a whole section? See how to [show a custom text message after the countdown timer ends](https://theplusaddons.com/docs/show-custom-text-message-after-countdown-timer-ends/).

Now, add the Countdown widget to the page and follow the steps:

- Select **Normal Countdown** from the **Countdown Setup** dropdown.- Choose your style and set the end date and time in the **Countdown Style** and **Launch Date** sections.- Open the **Extra Option** tab and turn on **Class Based Section Visibility**.- In the **During Countdown Class** field, enter the class name of the section to show while the timer runs, in our example, "offer".- In the **After Expiry Class** field, enter the class name of the section to show once the timer ends, in our example, "normal".

> *Note: you can do exactly the same on the Scarcity Countdown (Evergreen) setup.*

Turning on Class Based Section Visibility and entering the During Countdown and After Expiry class names.

Also read, [5 best WordPress countdown timer plugins](https://theplusaddons.com/blog/best-wordpress-countdown-timer-plugins/).

Now, while the countdown timer runs it will show the offer pricing section while hiding the normal pricing section. When visitors visit the page after the timer ends, it will show the normal pricing section and hide the offer pricing section.

The offer section and the normal section swapping automatically when the countdown ends.

## Use Cases

- **Price swap:** show a discounted-price section during the sale and the normal-price section once it ends.- **Stock or urgency banners:** show a "limited stock" or "ends soon" strip during the countdown, replaced by a plain banner afterward.- **Call-to-action swap:** show a time-sensitive CTA while the offer runs and a generic CTA once it expires.

## Limitations

- Both the During Countdown Class and After Expiry Class fields must be filled in. If either one is left empty, the widget does not emit the toggle data at all, and neither section will ever swap.- Only the first element on the page carrying a given class is toggled. If more than one section shares the same During Countdown Class or After Expiry Class, only the first one responds, the rest stay as they are.- Available only for Normal Countdown and Scarcity (Evergreen) Countdown, on any Countdown Style except Style 3. It does not apply to the Fake Numbers Counter setup.- This only toggles which section is visible. It does not animate the transition and does not remove either section from the page markup.- It runs independently of the Special Option tab's After Expiry Action. Combining it with a Page Redirect action is rarely useful, since the page navigates away before the class swap would be seen.

## Troubleshooting

**The sections do not swap at all.** Open the **Extra Option** tab and confirm **Class Based Section Visibility** is on and that both the **During Countdown Class** and **After Expiry Class** fields actually contain a class name. Also check that **Countdown Setup** is Normal or Scarcity (Evergreen) and that **Countdown Style** is not Style 3.

**It worked at first, but now only one of several matching sections swaps.** This is expected behavior, not a bug: the script always toggles the first element on the page with a given class, so if you reused the same class on more than one section, only the first instance responds. Give each pair of sections its own unique class names if you need more than one swap on the same page. (Reported in FluentSupport ticket #11314.)

**The section I expected to hide after expiry is still showing.** Double-check that the class name on the target element matches the After Expiry Class field exactly, including capitalization, and that the element is not also being shown by other CSS or by a different widget's own visibility setting. A third-party widget block staying visible after expiry, when it does not carry the exact After Expiry Class, is a common cause. (Reported in FluentSupport ticket #9003.)

**The wrong section flashes briefly when the page first loads.** The swap only happens once the widget's script runs, so on a slow-loading page both sections, or the wrong one, can be visible for a moment first. Give the During Countdown Class section a default visible style and the After Expiry Class section a default hidden style in your own CSS, so the page starts in the right state before the script takes over.

Also read, [how to redirect to different page after Elementor countdown ends](https://theplusaddons.com/docs/redirect-to-different-page-after-elementor-countdown-ends/).