Show/Hide div Depending On Day & Time (jQuery)

If you’re trying to show/hide a div at specific times, you are going to love what we’ve got for you in this article!

We’re going to give you the exact code we use on countless clients websites and teach you how to edit it to work with your specific requirements. 

For example, if your business is open between 9AM – 5PM, Monday to Friday –  you’ll be able to show a fixed button that lets people know your phone lines are open if they need any help. 

This can be incredibly beneficial when it comes to conversion rate optimisation, as well as user experience.

It is also integrated with Google Analytics tracking, so you’ll be able to see exactly how many people clicked on the button too!

Here’s The jQuery & HTML Code:

<script>
    function isOpen() {
        var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun,", "Jul",
            "Aug", "Sep", "Oct", "Nov", "Dec"];

        var date = new Date();

        var current_week_day = days[date.getDay()];
        
        var hour = date.getHours();
        var minute = date.getMinutes();
        var day = date.getDate();
        var month = months[date.getMonth()];
        var year = date.getFullYear();

        var opening_hours = Array();
        opening_hours["Sun"] = [0000, 0000];
        opening_hours["Mon"] = [0900, 1700];
        opening_hours["Tue"] = [0900, 1700];
        opening_hours["Wed"] = [0900, 1700];
        opening_hours["Thu"] = [0900, 1700];
        opening_hours["Fri"] = [0900, 1700];
        opening_hours["Sat"] = [0000, 0000];
        
        var days_closed = [
            {"day": 25, "month": "Dec"},
            {"day": 26, "month": "Dec"}
        ];

        if(current_week_day == "Sun") {
            return false;
        }

        if(current_week_day == "Sat") {
            return false;
        }

        var should_be_closed = days_closed.every(function(value) {

            if(day == value["day"] && month == value["month"]) {
                return false;
            }
            
            return true;
        });
        
        if(!should_be_closed) {
            return false;
        }

        var today_hours = opening_hours[current_week_day];
        var current_time = hour.toString() + minute.toString();

        if(today_hours[0] <= current_time && today_hours[1] > current_time) {
            return true;
        }
    }

    jQuery(document).ready(function () {            
        jQuery('.need-help-header').click(function () {
            jQuery('.need-help-content').slideToggle();
        });

        if(isOpen()) {
            jQuery(".contact-popup").show();
        }
    });
</script>
<div class="contact-popup hidden-xs" style="display: none;">
    <div class="need-help-wrapper">
        <div class="need-help-header" onClick="gtag('event', 'Clicked Need Help', {'event_category': 'Contact'});">
            Need Help?</div>
        <div class="need-help-content"><span class="need-help-lines-open">Phone Lines Are Open!</span><span
                class="need-help-phone-no">00000 000000</span></div>
    </div>
</div>

Here’s The CSS Code:

.need-help-wrapper {
position: fixed;
bottom: 0;
left: 0;
z-index: 99999;
width: 240px;
background-color:#fff;
box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.12);
border: 2px solid #27a42a;
}
.need-help-header {
background-color:#27a42a;
font-weight: bold;
color:#fff;
text-align: center;
padding: 4px;
font-size: 20px;
cursor:pointer;
}
.need-help-lines-open {
display: block;
font-size: 16px;
font-weight: bold;
text-align: center;
color:#27a42a;
margin: 2px 0 0;
}
.need-help-phone-no {
font-size: 25px;
display: block;
text-align: center;
margin-top: -2px;
margin-bottom: 3px;
}
.need-help-content {
display: none;
padding: 6px 0px;
}

How To Edit The Code For Your Website: