Hiding Side Menu Upon Browser Resizing
<p>User clicks the link "table of contents" and it appears as a side menu.
If the browser resizes below 1448px then the side menu does a fadeOut().</p>

<p>So, after having clicked the "table of contents" link, resizing the browser below 1448px, then resizing above 1448px...</p>

<p>How can I get the side menu to automatically fadeIn() again?</p>

<pre><code>    var button = $("a#contents_link"); // the TOC link
    var toc = $('#table-of-contents'); // the TOC div to show
    var browser = $(window);           // getting the browser width


    toc.hide();                         // hide the TOC div upon loading the page

    button.click(function (event) {    // toggling the TOC div
        toc.fadeToggle(300);
        event.preventDefault(); 
    });

    $(browser).resize(function() {
        if ( (toc.is(':visible')) &amp;&amp; (browser.width() &gt;=1449) ) {
            toc.fadeIn();
        } else if( (toc.is(':visible')) &amp;&amp; (browser.width() &lt;=1448) ){ 
            toc.fadeOut();
        }
    });
</code></pre>
