Q:

function(){If fadeout, then append} is not working

I am aware of jQuery UI's sortable option, but drag-and-drop isn't what I'm looking for.
Due to the way of how accordions are laid out, I think in order to sort them, the best way to go about it is to change the id, unsafe as that sounds.
This is what one of my accordions look like.
Copy code
<table style="background: none repeat scroll 0% 0% rgb(186, 218, 85); display: none;" tabindex="-1" aria-selected="false" aria-controls="ui-accordion-accordion1-panel-2" id="ui-accordion-accordion1-header-2" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <tbody>
        <tr>
            <td>... Yadayada, content. End table tags.

This is the code I use.
function pagination() {
    for (var i = 0; i < 10 ; ++i) {
        var k = i * 1000;
        var j = i * 100;
        var index;
        console.log("aftervar " + i);
        if ($("#ui-accordion-accordion1-header-" + i).css("display") == "none") {
            $("#ui-accordion-accordion1-header-" + i).attr("id", "ui-accordion-accordion1-header-" + j);
            $("#ui-accordion-accordion1-panel-" + i).attr("id", "ui-accordion-accordion1-panel-" + j);
            index = $("#ui-accordion-accordion1-header-" + j);
            $("#accordion1").append($("#ui-accordion-accordion1-header-" + j));
            console.log("if " + i);
        } else {/*
            k += 1;
            $("#ui-accordion-accordion1-header-" + i).attr("id", "#ui-accordion-accordion1-header-" + k);
            $("#ui-accordion-accordion1-panel-" + i).attr("id", "#ui-accordion-accordion1-panel-" + k);*/
        }
    }
    $("#tabs-1 table:nth-of-type(odd)").css("background", "#BADA55");
    $("#tabs-1 table:nth-of-type(even)").css("background", "#FFFFFF");
    $("#table-headings").css("background", "#FFFFFF");
}

I'm using the ids to sort it out.  The other problem is that the appends aren't working as they should (in fact, I put a console.log in there and it seems the if statement does not run sometimes).  The elements stay where they are and the appended is typically text of the id or nothing at all.
http://jsfiddle.net/Cb3U2/5/

A:

Someone else helped me on this issue.  He warned me against using id's, but showed me how unreliable it is to see fadeout and fadein.  I only know of separating the two through buttons.
http://jsfiddle.net/Cb3U2/7/
$("#ab-4").fadeOut();
$("#ab-7").fadeOut();

function foo() {
    for (var i = 0; i < 10; ++i) {
        var k;
        var j = 10 + i;
        if ($("#ab-" + i).css("display") == "none") {
            $("#ab-" + i).html(i + " (different)");
            $("#ab-" + i).attr("id","ab-" + j);
            $(".wrapper").append($("#ab-" + j));
        } else {
            $("#ab-" + i).html(i + " (Same)");
        }
        $("table:nth-of-type(odd)").css("background", "orange");
        $("table:nth-of-type(even)").css("background", "white");
    }
}

//setTimeout(foo, 10000);

function seeme() {
$("#ab-4").fadeIn();
//$("#ab-7").fadeIn();
//$("#ab-14").fadeIn();
$("#ab-17").fadeIn();
};

