EasyUI - How to add a new Item of Accordion on the top?

Question

I'm having an application using jquery-easyui using an Accordion on the Web page.

The HTML Code of Accordion is:

<div id="taskAccordion" class="easyui-accordion" data-options="multiple:false" style="width:500px; height:300px;">
    <div title="Java" style="padding:10px;">
        <p>This is Java.</p>
    </div>
    <div title="PHP" style="padding:10px;">
        <p>This is PHP.</p>
    </div>
    <div title="JS" style="padding:10px;">
        <p>This is JS.</p>
    </div>
</div>

I want ao add a new Item into Accordion with JS in runtime. The JS-function for adding is:

function addItem(){
    $('#taskAccordion').accordion('add',{
        title: 'Perl',
        selected: false,
        content:'This is Perl.'
    });
}              

The question is:
The new Item is under the Item "JS".
How can I add the Item on the top as the first one? Before the "Java"

Thank you!

Answer 1

1.delete old panels 2.add new panel 3.add old panels

But, the solution is foolish. hh

Answer 2

You can change the position of the item immediately after it is added. The following function moves the last element to the beginning of the accordion. In case you want to move the element to a different position you simply need to specify ids to the existing elements and then modify the selector accordingly.

function addItem(){
    $('#taskAccordion').accordion('add',{
        title: 'Perl',
        selected: false,
        content:'This is Perl.'
    });
    $('#taskAccordion').prepend($("#taskAccordion").children().last());
}