Responsive Content To Accordion

I am having a bit of trouble getting an accordion menu to work. Basically, I would like a 4 column layout which then becomes an accordion menu when the browser is resized to less t

Solution 1:

$(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();

    }

}

Makes sense?
A solution would be:

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();
    }
});