Is there a way to toggle the visibility of a div based on specific times and days of the week? For example, showing div1 at 12:00 pm on Sundays and div2 at 12:00 pm on Mondays, while keeping them hidden at other times. I have code that currently handles the hide/show functionality based on time, but I would like to also incorporate weekday logic using something like
if (day == Sunday || n > '08:59' && n < '09:59') {} function toggleDiv() {
Object.prototype.twoDigits = function () {
return ("0" + this).slice(-2);
}
// get current date and time
let now = new Date();
n = now.getHours().twoDigits() + ':' + now.getMinutes().twoDigits();
if (n > '08:59' && n < '09:59') {
$(".class-1").addClass("now").removeClass("old");
$('.class-1 .overlay').hide();
$('.class-2 .overlay').show();
$('.class-3 .overlay').show();
$('.class-4 .overlay').show();
$('.class-1 .overlay-2').hide();
$('.class-2 .overlay-2').hide();
$('.class-3 .overlay-2').hide();
$('.class-4 .overlay-2').hide();
}
else if (n > '09:59' && n < '10:59') {
$(".class-2").addClass("now").removeClass("old");
$('.class-1 .overlay').hide();
$('.class-2 .overlay').hide();
$('.class-3 .overlay').show();
$('.class-4 .overlay').show();
$('.class-1 .overlay-2').show();
$('.class-2 .overlay-2').hide();
$('.class-3 .overlay-2').hide();
$('.class-4 .overlay-2').hide();
}
else if (n > '10:59' && n < '11:29') {
$('.class-1 .overlay').hide();
$('.class-2 .overlay').hide();
$('.class-3 .overlay').show();
$('.class-4 .overlay').show();
$('.class-1 .overlay-2').show();
$('.class-2 .overlay-2').show();
$('.class-3 .overlay-2').hide();
$('.class-4 .overlay-2').hide();
}
else {
$(".class-1").addClass("old").removeClass("now");
$(".class-2").addClass("old").removeClass("now");
$(".class-3").addClass("old").removeClass("now");
$(".class-4").addClass("old").removeClass("now");
$('.hooray').show();
$('.overlay').show();
$('.overlay-2').hide();
}
}
$(document).ready(function () {
toggleDiv();
});