title: How to properly sort multiple accordions with jQuery
body: <p>This is my first time posting so please let me know if I fail to provide enough details. </p>
  
  <p>I have a page that contains multiple accordions. I wanted to use multiple accordions because I wanted users to be able to have multiple sections open at once which is not native to accordion. </p>
  
  <p>I also want users to be able to sort those accordions. The way the page is currently set up, users can sort the accordion with no problems. </p>
  
  <p>When the user goes to sort the accordions, I have a script that will close all existing accordions, store their ids in an array, and then reopen them when the user is done sorting. That part works fine too.</p>
  
  <p>The problem occurs when you try to place the section you are sorting between two sections that were previously open. It does not appear that jQuery can easily tell where one section begins and one ends when they are closed programatically. Note that if they were already closed, it works as expected. </p>
  
  <p>I've tried several approaches to this problem including adding a spacer div between sections as well as destroying the accordions and then reinitializing them after the sorting is finished to no avail. </p>
  
  <p>I suspect the problem occurs because when the accordion is first grabbed, the sections are open. But at that point, I close all the sections and even though the section closes, it causes those sections to jump around sporadically when you try to put a section between two.</p>
  
  <p>I've also noticed that the height of the contents of the accordion factors in. In my example below, the first div causes problems when it is open and you try to sort them but the others less so. </p>
  
  <p>Here is the code I have. The jQuery is the basic jQuery library and the stuff I wrote I included inline for simplicity:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link href="/css/flick/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      // Add Accordion stuff
      $(".accordion").accordion({
        autoHeight: false,
        active: false,
        collapsible: true
      }); // end $(".accordion").accordion
  
      // Add sortables
      $('.sortable').sortable({
        start: function(e, ui) {
          container = $(e.target);
  
          var parent_id = container.parent().parent().attr('id');
          expanded_ones = new Array();
          var count = 0;
          var summary = '';
          var child = '';
          var active = '';
  
          // now close all other sections
          $.each($('#' + parent_id + ' .accordion'), function() {
            // get the child element since that has the div id I need
            child = $(this).children('div');
  
            // get the active information to see if it is open or closed
            active = $(this).accordion('option', 'active');
  
            // check to see if this one is expanded
            if(parseInt(active) == active) {
              // store this id so we can open it later
              expanded_ones[count] = $(child).attr('id');
              count++;
  
              // and close the accordion
              $(this).accordion({ active: false });
            } // end if(parseInt(active) == active)
          }); // end $.each($('#' + parent_id + ' .accordion'), function()
        }, // end start: function(e, ui)
        stop: function(e, ui) {
          container = $(e.target);
  
          var parent_elem = '';
  
          // expand the ones that were originally expanded
          for(var i = 0; i &lt; expanded_ones.length; i++) {
            parent_elem = $('#' + expanded_ones[i]).parent();
            $(parent_elem).accordion('option', 'active', 0);
          } // end for(var i = 0; i &lt; expanded_ones; i++)
        } // end stop: function(e, ui)
      }); // end $('.sortable').sortable
    }); // end $(document).ready(function() {
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="outer"&gt;
    &lt;div class="box"&gt;
      &lt;div class="accordion_wrapper sortable" rel="sections"&gt;
        &lt;div id="accordion_a" class="section_accordion"&gt;
          &lt;div class="accordion"&gt;
            &lt;h4&gt;Accordion A&lt;/h4&gt;
            &lt;div id="accordion_a_content"&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
              &lt;p&gt;Stuff&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="accordion_b" class="section_accordion"&gt;
          &lt;div class="accordion"&gt;
            &lt;h4&gt;Accordion B&lt;/h4&gt;
            &lt;div id="accordion_b_content"&gt;
              Stuff
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="accordion_c" class="section_accordion"&gt;
          &lt;div class="accordion"&gt;
            &lt;h4&gt;Accordion C&lt;/h4&gt;
            &lt;div id="accordion_c_content"&gt;
              Stuff
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="accordion_d" class="section_accordion"&gt;
          &lt;div class="accordion"&gt;
            &lt;h4&gt;Accordion D&lt;/h4&gt;
            &lt;div id="accordion_d_content"&gt;
              Stuff
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>