title: jQuery UI accordion destroy not working
body: <p>I've hit a problem deleting the accordion widget when the window is resized above a set point.</p>
  
  <p>I'm using jQuery 1.8.3 and the jQuery UI 1.9.2.</p>
  
  <p>This is my code:</p>
  
  <pre><code>/*
  * Detect browser size and add accordian on page (at load) if necessary
  */
  $(document).ready(function() {
      var window_width = $(window).width();  
      if (window_width &lt;= 767){
          $("div.innernav ul.menu").accordion({ 
              header: '.separator',
              animated: 'slide',
              event: "click",
              heightStyle: "content",
              icons: { "header": false, "headerSelected": false } ,
              collapsible: true, 
              active: false,
          });
      }
  });
  /*
  * Detect browser size on resize and add/remove accordian
  */
  $(window).resize(function() {
      var wi = $(window).width();
      if (wi &lt;= 767){
          $("div.innernav ul.menu").accordion({ 
              header: '.separator',
              animated: 'slide',
              event: "click",
              heightStyle: "content",
              icons: { "header": false, "headerSelected": false } ,
              collapsible: true, 
              active: false,
          });
      } else if (wi &gt;= 768){
          $("div.innernav ul.menu").accordion("destroy");
      }
  });
  </code></pre>
  
  <p>The code works and my accordion is only active when window width is smaller than 768px but I get an:</p>
  
  <p><code>Error: cannot call methods on accordion prior to initialisation; attempted to call method 'destroy'</code></p>
  
  <p>It seems this error makes other code I have on the page bork so I could do with removing this error.  I'm a javascript/jQuery newbie so would really appreciate a helping hand.</p>
  
  <p>Many thanks!  </p>