jQuery Accordion from $("div id=\"accordion\">

I am using GWTQuery and GWTQuery-UI, but I think it would work the same for JQuery-UI.

How can I create an accordion without define the accordion in the HTML doc?

e.g.

    $("<div id=\"accordion\">   <h3><a href=\"#\">Section 1</a></h3><div><p>Mauris.</p></div><h3><a href=\"#\">Section 2</a></h3><div><p>Sed non urna.</p></div><h3><a href=\"#\">Section 3</a></h3><div><p>Nam enim risus.</p><ul><li>List item one</li><li>List item two</li>li>List item three</li></ul></div><h3><a href=\"#\">Section 4</a></h3><div><p>Cras dictum.</p><p>Suspendisse</p></div></div>");
    $("#accordion").as(Ui).accordion();

This wont show any text at all. If i append it to a Panel, i only get the Text with the Section but no accordion.

Thanks

Edit: Creating an empty div accordion in the HTML file, append the string

$("#accordion")
            .append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>");
    $("#accordion")
            .append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>");
    $(absolutePanel_1.getElement()).append(
            $("#accordion").as(Ui).accordion());

and add it to a gwt-panel is working.

Solution

You can create the accordion in JavaScript, but you will need to append it to an element for it to be displayed on the page.

See this jsFiddle for a demonstration. Here's the code:

<script type="text/javascript">
    $(function(){

        //get the accordion container
        var $accordion = $("#accordion");    

        //append elements to the accordion   
        $accordion.append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>");
        $accordion.append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>");

        //turn it into an accordion
        $accordion.accordion();          

    });
</script>
<div id="accordion"></div>