How to override jquery slidetoggle when screen size changes
<p>I am attempting to use an accordion slidetoggle nav when the screen width is less than 1200px and then want to disable/remove the slidetoggle functionality when it is greater than 1200px wide.</p>

<p>The problem: When I load the page in Desktop width, all is well because I'm not triggering the slideToggle until screen width is "mobile" sized... &lt;1200px. </p>

<p>If I then resize the screen to mobile, my toggled divs are already visible without even clicking on them. If I resize to Desktop width all is well - the toggle divs have disappeared. If I again resize to mobile and then click on the primary link to toggle the divs and leave one toggled open and then resize to Desktop, my content is invisible, but the nav links are out of alignment.  When I look at the css I see that there is an inline css display:block for the toggled div. </p>

<p>Despite my many attempts to override that inline style (.css, .removeClass, .addClass, .attr, etc.) that damn line of code persists. </p>

<p><strong>UPDATE:</strong> I wrote an IF statement to check whether the toggled div is display:block whenever there is a screen resize and it is greater than 1200px wide.  This test comes back false every time, but I can see the inline css for the element: display:block.  How can this happen? Here is the code for the test. Also see images. </p>

<pre><code>if ( $('mobile-child-nav-links').css('display') == 'block') {
        console.log("tested true");
        $('mobile-child-nav-links').css('display', 'none');
    } else {
        console.log("tested false");
    }
</code></pre>

<p><a href="http://i.stack.imgur.com/gBggS.png" rel="nofollow">Dev Tools showing that the element has inline style set to display:block</a></p>

<p><a href="http://i.stack.imgur.com/vU3IG.png" rel="nofollow">Dev Tools console showing my if statement is not detecting display:block when it is clearly there</a></p>

<p>What is the deal? Please see code below:</p>

<pre><code>    &lt;script&gt;
        // Responsive accordian menu jquery 
        $( document ).ready(function() {
            var win = $(this); //this = window
            var currentScreenWidth; 

           var mobileLinksDiv = $('mobile-child-nav-links');
           var mobileLinksDivs = $('mobile-child-nav-link');
           function getScreenWidth() {
                return currentScreenWidth = $(window).width(); 
           }

           function enableMobileNav() {
                        // toggle on click of primary nav link
                        $('.primary-nav-link').off('click').on('click', function(e) { // prevents multiple click events from screen resizes
                           e.preventDefault();
                            $('.primary-nav-link').addClass('mobile-active-primary-link');
                            // locate the next sub menu div containing sub nav links and toggle it into view
                            var subNavContainer = $(this).nextAll('.mobile-child-nav-links').eq(0).toggle();
                        });
           }

          function disableMobileNav() {
            $('.mobile-child-nav-links').addClass('hideEls');
            $('.primary-nav-link').removeClass('mobile-active-primary-link');
            $('.primary-nav-link').off('click'); // remove click binding to avoid multiple .click events at once
            $('mobile-child-nav-links').hide(); // ensure that sub nav div and links are hidden 
           }

           // Checking page width on initial page load
           if (getScreenWidth() &gt;= 1200) {
             // do nothing
           } else { 
              enableMobileNav();  
           }

            // Screen resizing triggers this function
            $(window).on('resize', function(e){
            currentScreenWidth = $(window).width();
             if (currentScreenWidth &gt;= 1200) {
             $('.mobile-child-nav-links').addClass('hideEls');
                disableMobileNav();
              } else {
                enableMobileNav();
              }
            });  
        }); 
        &lt;/script&gt;

CSS

    /* =================  Mobile Accordian Sub Nav ======================= */
 /*Sub nav links for mobile device nav */
 div.mobile-child-nav-links, div.mobile-child-nav-link {
        display: none;
        /*visibility:  hidden;*/
        background-color: #AF251F !important;
        color: white !important;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: .5em;
        font-size: .8em;
        font-weight: 400;
        padding-left: 1em;
}

@media screen and (max-width: 1200px) {
        div.mobile-child-nav-links, div.mobile-child-nav-link {
        display: block;
        /*visibility: visible;*/
        }   

    }

.hideEls {
    display: none;
    /*visibility:  hidden;*/
}

.showEls {
    display: block;
   /* visibility: visible;*/
}
</code></pre>