how to reset slidetoggle()

manpreet Best Answer 2 years ago

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.