title: Show/hide a div on resize with jQuery?
body: <p>I am trying to hide a div on my page when the page gets below a certain screen width and then show it again if the browser is resized back above the breakpoint.</p>
  
  <p>I am using a script I found online and it works great, but the breakpoint doesn't seem to be working correctly. I set the div to hide if the screen gets below 768px and show if its above 768px but for some reason, it's happening at 784px instead.</p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>$(document).ready(function() 
  {
      //window
      var $window = $(window);
  
      //display nav
      var displayNav = true;
  
      //on resize get widths
      getWidths();
      $window.resize(getWidths);
  
      //set width of content to the needed widths
      function getWidths()
      {
          var browserWidth = $window.width();
  
          if ((browserWidth &lt;= 768) &amp;&amp; (displayNav == true))
          {
              displayNav = false;
              toggleNav();
          }
          else if ((browserWidth &gt; 768) &amp;&amp; (displayNav == false))
          {
              displayNav = true;
              toggleNav();
          }
      }
  
      //toggle nav
      function toggleNav()
      {
          $(".secondaryNav").toggle();
      }
  });
  </code></pre>
  
  <p>Any ideas? Thanks!</p>