Question

I am working on a responsive site that with the aid of twitter bootstrap, in this case it takes the footer heading and when the screen width is a certain width , it then turns on slideToggle(), this works fine, but the problem is when I increase the browser size again I want this functionality to not only turn off but to reset back display:block.

Im currently still learning jQuery and JS so it may be an obvious one.

I need it to work so its not relying on a click to reset it back…

Here is the entire code including getting screen size:

        var myWidth = 0, myHeight = 0;
    function getSize(){
            if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
                }   
    }

    getSize(); // run first time
            $(window).resize(function(){
                getSize(); // do it on resize
            });

            $("#footer h3").click(function () {

                if (myWidth < 980) {
                $(this).toggleClass("active");
                $(this).parent().find("ul").slideToggle('medium');  
                }                   
            });

Im thinking slideDown() but not sure how to make it happen automatically.

Answer 1

Inside the code that checks for screen width (maybe you can post that anyway?) you can do something like this:

if (myWidth < 980) {
    $(this).parent().find("ul").slideDown('medium');
} else {
    $(this).parent().find("ul").slideUp('medium');
}

For more control over the slide behavior it’s better to use the separate slideDown and slideUp methods instead of slideToggle. In that case you know for sure your ul gets slide up/down instead of just toggled.

Also, you might want to add the stop() method to avoid buildup of slide animations if the window width passes the 980 threshold multiple times in short succession:

if (myWidth < 980) {
    $(this).parent().find("ul").stop().slideDown('medium');
} else {
    $(this).parent().find("ul").stop().slideUp('medium');
}