title: jQuery Accordion Sortable Issue - Nested Divs & Nested Header
body: <p>I'm trying to make a accordion sortable but at the moment it seems flickery compared to the default example.</p>
  
  <p>I believe the issue is related to my nesting structure but I thought that wrapping the content in a div would have solved that.</p>
  
  <p>The actual accordion works fine it just seems to struggle when using the sortable command.</p>
  
  <p>I'm trying to use a styled bar like this for the section headers:
  <a href="https://www.dropbox.com/s/y5ebikvx9kc9jmu/Screenshot%202014-06-25%2018.09.01.png" rel="nofollow">https://www.dropbox.com/s/y5ebikvx9kc9jmu/Screenshot%202014-06-25%2018.09.01.png</a></p>
  
  <p>Which will then reveal a multi column div content.</p>
  
  <p>The Jquery:</p>
  
  <pre><code>// Accordion
  $( "#accordion" )
    .accordion({
      header: ".accordion-section",
      collapsible: true,
    })
    .sortable({
      axis: "y",
      handle: ".accordion-order",
      stop: function( event, ui ) {
        // IE doesn't register the blur when sorting
        // so trigger focusout handlers to remove .ui-state-focus
        ui.item.children( ".accordion-order" ).triggerHandler( "focusout" );
      }
    });
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>&lt;!-- ACCORDION --&gt;
  &lt;div id="accordion"&gt;
  
      &lt;!-- ACCORDION SECTION HEADING 1 --&gt;
        &lt;div class="grid dark-grey-bkg accordion-section"&gt;
          &lt;span class="accordion-section-number"&gt;1&lt;/span&gt;
          &lt;span class="accordion-section-title"&gt;This is an example title 1&lt;/span&gt;
          &lt;span class="accordion-order"&gt;^&lt;/span&gt;
        &lt;/div&gt;
      &lt;!-- /ACCORDION SECTION HEADING --&gt;
  
      &lt;!-- ACCORDION SECTION CONTENT 1  --&gt;
        &lt;div class="accordion-content"&gt;
  
              &lt;div class="col-8"&gt;
                  &lt;div&gt;
                      &lt;h3&gt;Content Here&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-4"&gt;
                  &lt;div&gt;
  
                      &lt;h3&gt;Content Here&lt;/h3&gt;
  
                      &lt;div&gt;
                          &lt;div class="col-12"&gt;
                              &lt;h3&gt;Content Here&lt;/h3&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div&gt;
                          &lt;h3&gt;Content Here&lt;/h3&gt;
                      &lt;/div&gt;
  
                      &lt;div&gt;
                          &lt;h3&gt;Content Here&lt;/h3&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;!-- /ACCORDION SECTION CONTENT 1 --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>
          </p>