title: removing css class with jquery when window reaches certain width
body: <p>I am trying to add and remove some classes to some  elements i have. I am using bootstrap, i currently have the site www.iampaulb.com which looks rather good (for a first attempt) on mobile like my iPhone but on a desktop not so much. </p>
  
  <p>this is the div in question:</p>
  
  <pre><code>&lt;div id="demo1" class="collapse in"&gt;
      &lt;legend class="main-legend"&gt;Hello! I am Paul...&lt;/legend&gt;
  </code></pre>
  
  <p>the .collapse in class closes the div on load (so you need to press the button to open) I would like to remove that class and use the class .collapse which will leave the content open on load. I have looked through here and tried various things. Such as</p>
  
  <pre><code>var windowsize = $(window).width();
  
  $(window).resize(function() {
    windowsize = $(window).width();
    if (windowsize &gt; 800) {
      //if window width is greater than 800px make tab visable
        $('#demo').addClass('collapse');
    }
  })
  </code></pre>
  
  <p>But it doesnt seem to work. :(</p>
  
  <p>Any suggestions? FYI i am a jQuery Noob
  ;</p>
  
  #
  
  <p>Ok i have used one of the suggestions here and it has worked brilliantly.
  But only when the browser is being resized manually...this is what i have</p>
  
  <pre><code>$(window).on("resize.showContent", function() {
      windowsize = $(window).width();
      if(windowsize &gt; 800) {
          $(".collapse:first").addClass("in").removeAttr("style");
      }
  }).trigger("resize.showContent")
  
  $(window).on("resize.showContent", function() {
      windowsize = $(window).width();
      if(windowsize &lt; 800) {
          $(".collapse:first").removeClass("in").removeAttr("style");
      }
  }).trigger("resize.showContent") 
  
  // change of button for top element
  
  $(window).on("resize.showContent", function() {
      windowsize = $(window).width();
      if(windowsize &gt; 800) {
          $("#button1").removeClass("large btn-block").addClass("btn-link").removeAttr("style");
      }
  }).trigger("resize.showContent")
  
  $(window).on("resize.showContent", function() {
      windowsize = $(window).width();
      if(windowsize &lt; 800) {
          $("#button1").removeClass("btn-link").addClass("-large btn-block").removeAttr("style");
      }
  }).trigger("resize.showContent")
  </code></pre>
  
  <p>This enables the section to expand and removes the button class so it shows a s link.
  But what would i amened to make it defaul when say on an iphone or desktop. Would it be a case of just removing the <code>resize.</code> ? hope that makes sense</p>