Question

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:

<script type='text/javascript'>

    var selected = new  Array();
    var ids = new Array();
    var counter = <?php echo (req('fd_id'))? count($results): 0;?>;
    $(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("<?php echo matry::base_to('utilities/search/referral_search&str=')?>" + value);
                }
            });
        $(function () {
            $("#trip_list").accordion({
                header: ">li >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: '<?php echo matry::base_to('utilities/crm/field_day_save');?>',
                    data: $("form#trip_form").serialize(),
                    dataType: 'json',
                    success: function (data)
                    {
                        $("#alerts").html(data.alert);
                        $("#form_id").val(data.id);
                    }
                    });
            });
    });

    function selectItem(id)
    {
        if (counter < 20) //only allow 20 referral sources at a time
        {
            $.get("<?php echo matry::base_to('utilities/field_day'); ?>&rfcode=" + id + "&count=" + counter, function(data){
                        $("#trip_list").append(data).accordion('destroy').accordion({header: "li >h3", collapsible: true});}); 
            counter++;
        }
    }

</script>

Update

I have added the following, but it only works on the Second or more panels. The first panel ignores it. Any suggestions?

$(function () {
            $("#trip_list").accordion({
                header: "li >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" );
                }
            });

Answer 1

1. Use sortable() methods in accordion() event

Using the accordion’s accordionactivate event which fires whenever an accordion panel is opened or closed, you can check if the accordion is collapsed or not, and apply the .sortable('enable') or .sortable('disable') methods in accordance.

2. Detect if the accordion is collapsed

To detect the state of the accordion in the event handler, you can check the ui.newPanel property, which is a jQuery object containing the newly opened accordion panel. If ui.newPanel is not an empty object, then it means the accordion is not collapsed (i.e a closed panel was clicked). Similarly, if ui.newPanel is an empty object, then it means the accordion is completely collapsed (i.e an open panel was clicked and no new panel opened in its place).

Example and demo

$('#accordion').accordion({...}).sortable({...});

$('#accordion').on('accordionactivate', function (event, ui) {
     // Accordion is not collapsed
    if (ui.newPanel.length) {
        $('#accordion').sortable('disable');
     // Accordion is collapsed
    } else {
        $('#accordion').sortable('enable');
    }
});

See jsFiddle demo