title: Jquery Accordion slide next header when previous item removed
body: <p>Please find this <a href="http://jsfiddle.net/valentynvynogradskyi/yy0a1x54/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>If you click "delete" while item collapsed - then when you unwrap next one, it's header will slide up, like accordions content, anyone have idea why does this happen?</p>
  
  <p>I think it may happen because the accordion somehow starts thinking that h3 now is a content - and on click collapse it, but i can't make it work anyway.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('#myClicker').click(function () {
          var head = $(this).closest('h3');
          var content = head.next('div');
          content.add(head).fadeOut(300, function () {
              $(this).remove();
          });
      });
  
      $("#accordion").accordion({
          autoHeight: true
      });
      $("#accordion").accordion({
          collapsible: true
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;div id="accordion"&gt;
       &lt;h3&gt;&lt;a href="#"&gt;Section 1&lt;/a&gt;&lt;input type="button" id="myClicker" value="delete" /&gt;&lt;/h3&gt;
  
      &lt;div&gt;
          &lt;p&gt;Section 1 Content&lt;/p&gt;
      &lt;/div&gt;
      &lt;h3&gt;&lt;a href="#"&gt;Section 2&lt;/a&gt;&lt;/h3&gt;
  
      &lt;div&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;h3&gt;&lt;a href="#"&gt;Section 3&lt;/a&gt;&lt;/h3&gt;
  
      &lt;div&gt;
          &lt;p&gt;Section 3 Content&lt;/p&gt;
      &lt;/div&gt;
      &lt;h3&gt;&lt;a href="#"&gt;Section 4&lt;/a&gt;&lt;/h3&gt;
  
      &lt;div&gt;
          &lt;p&gt;Section 4 Content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>UPD 1: 
  After some experimenting i end up with:</p>
  
  <pre><code>$('#myClicker').click(function(){
      event.stopPropagation();
      var head = $(this).closest('h3');
      var content = head.next('div');
  
          head.fadeOut(300,function(){
              head.remove();
              content.remove();
          });
  
  });
  </code></pre>