How can I show or hide divs based on specific date intervals using JavaScript?

Below is an example of how to refactor your code. The main issue is the way you're chaining comparisons:

• In JavaScript, the expression
  current.getTime() > start.getTime() > expiry.getTime()
  doesn't work as expected. Instead, you need to separately compare the current time with both the start and expiry times.
• Setting the interval delay to 0 can be too aggressive. A delay such as 1000 (one second) is generally sufficient for this purpose.

Check out the revised code:

JavaScript

JAVASCRIPTCopied
// For first div: content on February 03, 2025 between 09:00:00 and 21:00:00
setInterval(function() {
  var current = new Date();
  var start = new Date("February 03, 2025 09:00:00");
  var expiry = new Date("February 03, 2025 21:00:00");

  // Check if the current time is within the time window
  if (current >= start && current <= expiry) {
    $('.divcontainerone').show();
  } else {
    $('.divcontainerone').hide();
  }
}, 1000); // checks every second

// For second div: content on February 13, 2025 between 09:00:00 and 21:00:00
setInterval(function() {
  var current = new Date();
  var start = new Date("February 13, 2025 09:00:00");
  var expiry = new Date("February 13, 2025 21:00:00");

  if (current >= start && current <= expiry) {
    $('.divcontainertwo').show();
  } else {
    $('.divcontainertwo').hide();
  }
}, 1000);

HTML

HTMLCopied
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="divcontainerone" style="display:none">
  <p>content for div #one</p>
</div>

<div class="divcontainertwo" style="display:none">
  <p>content for div #two</p>
</div>

Explanation

1. Interval Delay:
   A 1000ms interval checks once per second instead of continuously, which reduces unnecessary resource usage.

2. Time Comparison:
   The condition if (current >= start && current <= expiry) properly checks if the current time is between the start and expiry dates.

3. Simplified Show/Hide Logic:
   By using an if/else block, it's clearer which state (show/hide) is applied based on the time.

Using this structure, you can easily add more divs by replicating the pattern with their respective date ranges.