响应内容手风琴(Responsive content to accordion)

我有一点麻烦的手风琴菜单工作。基本上，我想4列布局当浏览器的尺寸调整为小于600px的然后变成一个手风琴菜单。它几乎适用，例如，如果您访问的大小时，您的浏览器小于600px的已经，那么它的工作原理。

但是，如果你开始在桌面大小，然后调整浏览器向下跌破600像素，并尝试点击标题，它不会因某种原因失效。没有得到任何错误，只是不工作（内容区域不展开）。

我做了什么，我试图做一个快速演示，它应该是相当简单的，我只是不能得到它的工作（睡眠不足可能没有帮助）！

链接到演示

在此先感谢您的帮助:)

詹姆士

$(window).load(function(){
    footerAccordion(); // Display footer as accordion on mobile sizes
});
$(window).resize(function(){
    footerAccordion(); // Display footer as accordion on mobile sizes
}); 

function footerAccordion() {

    if (window.innerWidth < 601) { /* NOTE THIS... */

        $('.col .mobslider').hide();
        $('.col').find('h2').click(function () {

            if (window.innerWidth < 601) {
                $(this).parent().find('.mobslider').stop().slideToggle();
            } else if (window.innerWidth > 600) { /* WHAT's THIS THAN FOR ? */
                $('.col .mobslider').show();
            }

        });

    } else if (window.innerWidth > 600) {

        $('.col .mobslider').show();

    }

}

说得通？
一个解决办法是：

var winIsSmall;
$(window).on('load resize', footerAccordion );

function footerAccordion() {
    winIsSmall = window.innerWidth < 601;
    $('.col .mobslider').toggle(!winIsSmall);
}

$('.col').find('h2').click(function () {
    if(winIsSmall){
        $(this).parent().find('.mobslider').stop().slideToggle();
    }
});