Show/Hide divs based on date

Question

I'm trying to show hide divs based on date and am experimenting with the following code:

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>

window.setInterval(function(){

  var current = new Date();
  var expiry  = new Date("October 29, 2012 12:00:00")
  var expiry2 = new Date("October 30, 2012 12:00:00")

  if(current.getTime()>expiry.getTime()){
    $('#one').hide();
    $('#two').show();
  }

  else(current.getTime()>expiry2.getTime()){
       $('#two').hide();
       $('#three').show();
   }

}, 3000);

$('#one').show(); 
</script>

<div id="one" style="display:none">
<p>content for div #one</p>
</div>

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

<div id="three" style="display:none">
<p>content for div three</p>
</div>

Console in chrome is throwing up :

Unexpected token {

So it seems there's a syntax error with the if else statement, but it looks ok to me : (

Can any one spot what I'm missing?

You can read more about `if...else` at MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/if...else — Andreas Louv, Oct 29 '12 at 12:20
You guys are faast! Thanks for spotting my dozy monday morning errors! — h0rhay, Oct 29 '12 at 12:35
@h0rhay I have updated my answer. The reason the third div is not showing is because the else if condition is never reached since the first if is true — Jacob George, Oct 29 '12 at 13:01

Jacob George · Accepted Answer · 2012-10-29T13:00:08.347

You can check the working jsfiddle if you want

The issue is you require an else if at else (current.getTime() > expiry2.getTime()) {

UPDATE 1

Close each div with </div>. Fiddle is also updated

UPDATE 2

You also have what I think is a logical error. If you want the condition (current.getTime() > expiry2.getTime()) to be activated, it cant come as the else of the first condition (current.getTime()>expiry.getTime()). Change the else if to if, it should work then, although to further optimize the code, you could enclose the second if within the first if (considering that expiry is always less than expiry2 )

score 5 · Answer 2 · answered Oct 29 '12 at 12:16

5

You forgot about if after else:

else if (current.getTime() > expiry2.getTime()) {

answered Oct 29 '12 at 12:16

VisioN

143,310
32
282
281

score 3 · Answer 3 · answered Jan 19 '16 at 23:53

I've manipulated the script a bit so that you can add the class and the item will disappear on the time you decide. It will either show or hide if the content has expired. You can add more variables and else if statements, if need be.

I'm still learning JS and jQuery so please keep this in mind but everything seems to work the way I wanted it to and I have no errors in the Console.

https://jsfiddle.net/medel/qhgrtwzm/2/

HTML

<div class="houdini" style="display:none">
  <p>content for div #one</p>
</div>

JS with jQuery enabled 1.8.3

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date("January 19, 2016 17:39:00")

  if (current.getTime() > expiry.getTime()) {
    $('.houdini').hide();

  } else if (current.getTime() < expiry.getTime()) {
    $('.houdini').show();
  }

}, 0);

score 1 · Answer 4 · edited Dec 03 '15 at 18:47

Jacob George's answer is excellent! Posting this up in case it helps anyone. I had to modify the date/time format for UTC/GMT compatibility with Internet Explorer. I also reordered the logic so it triggers like a waterfall, only showing one div based on the expiry time, or no div's if the current time is before the expiry value.

Javascript:

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date('2015-12-03T02:00:00.000-08:00')
  var expiry2 = new Date('2015-12-04T02:00:00.000-08:00')
  var expiry3 = new Date('2015-12-05T02:00:00.000-08:00')

  if (current.getTime() > expiry3.getTime()) {
    $('#one').hide();
    $('#two').hide();
    $('#three').show();
  } else if (current.getTime() > expiry2.getTime()) {
    $('#one').hide();
    $('#two').show();
    $('#three').hide();
  } else if (current.getTime() > expiry.getTime()) {
    $('#one').show();
    $('#two').hide();
    $('#three').hide();
  }

}, 3000);

YDF · Answer 5 · 2021-01-06T13:37:12.260

1

You forgot the if inside the else statement. Your if-else block should be something like below:

if (current.getTime() > expiry.getTime()) {
    $('#one').hide();
    $('#two').show();
} else if (current.getTime() > expiry2.getTime()) {
    $('#two').hide();
    $('#three').show();
}

edited Jan 06 '21 at 13:37

answered Sep 16 '20 at 06:11

YDF

365
5
9

Show/Hide divs based on date

5 Answers5

Linked