title: how to reset slidetoggle()
body: <p>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 <code>slideToggle()</code>, 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 <code>display:block</code>.</p>
  
  <p>Im currently still learning jQuery and JS so it may be an obvious one.</p>
  
  <p>I need it to work so its not relying on a click to reset it back...</p>
  
  <p>Here is the entire code including getting screen size:</p>
  
  <pre><code>        var myWidth = 0, myHeight = 0;
      function getSize(){
              if( typeof( window.innerWidth ) == 'number' ) {
                  //Non-IE
                  myWidth = window.innerWidth;
                  myHeight = window.innerHeight;
              } else if( document.documentElement &amp;&amp; ( 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 &lt; 980) {
                  $(this).toggleClass("active");
                  $(this).parent().find("ul").slideToggle('medium');  
                  }                   
              });
  </code></pre>
  
  <p>Im thinking <code>slideDown()</code> but not sure how to make it happen automatically.</p>