title: Apply jQuery-UI sortable() to accordion() element only when collapsed
body: <p>Is it possible to make a jquery accordion sortable only when all elements are collapsed? I have a sortable accordion, but when the active element is moved , it breaks the css on the page (rearranges the columns,). I know this is likely a problem with the css on the site rather than the accordion, but I don't have permissions to adjust all of the css. Below is the code I am using to create the accordion:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  
      var selected = new  Array();
      var ids = new Array();
      var counter = &lt;?php echo (req('fd_id'))? count($results): 0;?&gt;;
      $(document).ready(function(){
          $("#livesearch").bind("keyup", function () {
                  var value = escape($("#livesearch").val());
                  if (value.length == 0)
                      $("#results").fadeOut(500);
                  else
                  {
                      $("#results").fadeIn(500);
                      $("#results").load("&lt;?php echo matry::base_to('utilities/search/referral_search&amp;str=')?&gt;" + value);
                  }
              });
          $(function () {
              $("#trip_list").accordion({
                  header: "&gt;li &gt;h3",
                  collapsible: true
              }).sortable({
                  axis: 'y',
                  handle: 'h3',
                  stop: function(event, ui)
                  {
                      ui.item.children( "h3" ).triggerHandler( "focusout" );
                  }
              });
  
              });
          $("#livesearch").blur(function(){$("#livesearch").val(""); $("#results").fadeOut(500);});
          $("#reset").click(function(){$("#trip_list").html("");});
          $("button.remove").on('click', function (){
                  $(this).parents('li').remove();
              });
          $("button#save").on('click', function (){
                  $.ajax({
                      type: 'POST',
                      url: '&lt;?php echo matry::base_to('utilities/crm/field_day_save');?&gt;',
                      data: $("form#trip_form").serialize(),
                      dataType: 'json',
                      success: function (data)
                      {
                          $("#alerts").html(data.alert);
                          $("#form_id").val(data.id);
                      }
                      });
              });
      });
  
      function selectItem(id)
      {
          if (counter &lt; 20) //only allow 20 referral sources at a time
          {
              $.get("&lt;?php echo matry::base_to('utilities/field_day'); ?&gt;&amp;rfcode=" + id + "&amp;count=" + counter, function(data){
                          $("#trip_list").append(data).accordion('destroy').accordion({header: "li &gt;h3", collapsible: true});}); 
              counter++;
          }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>I have added the following, but it only works on the Second or more panels. The first panel ignores it. Any suggestions?</p>
  
  <pre><code>$(function () {
              $("#trip_list").accordion({
                  header: "li &gt;h3",
                  active: false,
                  collapsible: true,
                  activate: function(){if($(this).accordion('option', 'active')){$(this).sortable('disable');}else $(this).sortable('enable');}
              }).sortable({
                  axis: 'y',
                  handle: 'h3',
                  stop: function(event, ui)
                  {
                      ui.item.children( "h3" ).triggerHandler( "focusout" );
                  }
              });
  </code></pre>