windows.resize function issue

Question

Here is my code

$(document).ready(function(){
    $(window).resize(function() {
        if ($(window).width() > 980) {
            $('.info-container a').toggle(function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeIn();
                return false;
            }, function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeOut();
                return false;
            });
        }
        else {
            $('.info-container a').unbind('click'); 
        }
    });
});

I want show the hidden div on click, when browser width > 980px.

when I open page - code does not work as long as the width of the window will not change. After that, it works fine.

Here is my code in JSFIDDLE but it doesn't work there...

Answer 1

It is because your functions are in $(window).resize(); function. If you want for it to work, you need to launch at click event and resize event.

You can achieve this by wrapping your functions separately, and launching them at document.click and at window.resize.

$(document).ready(function(){
    var hide = function(){
        if ($(window).width() > 980) {
            $('.info-container a').toggle(function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeIn();
                return false;
            }, function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeOut();
                return false;
            });
        }
        else {
            $('.info-container a').unbind('click'); 
        }
    };
    $(document).click(hide);
    $(window).resize(hide);
)};