Show/Hide Content

Control content visibility based on timer status by simply adding classes to your elements.

Simple Implementation

All timer settings are configured in the FunnelWidgets app. You only need to add classes to elements you want to show or hide.

Basic Usage

Add the appropriate classes to control element visibility when the timer ends:

<!-- Content that starts visible and hides when timer ends -->
<div class="hide-me timee-visible">
  <h3>Limited Time Offer!</h3>
  <p>Get 50% off - Ends soon!</p>
</div>

<!-- Content that starts hidden and shows when timer ends -->
<div class="show-me timee-hidden">
  <h3>Offer Expired</h3>
  <p>Sorry, you missed this deal.</p>
</div>

<!-- Optional: Display the timer -->
<div id="timee-123"></div>

Available Classes:

hide-me timee-visible: Initially visible, hides when timer ends
show-me timee-hidden: Initially hidden, shows when timer ends

Timer Display:

To display the timer, add a div with the ID from your timer configuration:

<div id="timee-123"></div>

Common Examples

Special Offer with Fallback

Show a special offer and replace it with a different offer when the timer ends.

<!-- Display the timer -->
<div id="timee-123"></div>

<!-- Special offer content - initially visible -->
<div class="hide-me timee-visible">
  <div class="offer-box">
    <h3>🔥 Flash Sale!</h3>
    <div class="price">
      <span class="original">$997</span>
      <span class="special">$497</span>
    </div>
    <p>Save 50% - Limited Time Only!</p>
    <button class="buy-button">
      Claim This Deal
    </button>
  </div>
</div>

<!-- Regular offer content - initially hidden -->
<div class="show-me timee-hidden">
  <div class="offer-box">
    <h3>Regular Price</h3>
    <div class="price">$997</div>
    <p>Standard package includes:</p>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
    <button class="buy-button">
      Buy Now
    </button>
  </div>
</div>