Inserting children into a DIV for jQuery UI accordion

Question

I have a page with an empty DIV that I want to turn into an accordion. I understand from the documentation that the section headers need to be H3 tags, while the child elements need to be P or DIVs. Maybe I'm not getting it right. I have this code that runs when the page loads. The accordion is created successfully, but instead of having a single section with n number of child items, it seems to be creating a header for every other child item. The elements variable is a map (a dictionary) returned from an ajax call, which contains the titles and URLs of the elements that need to be displayed in the accordion.

var markup = "";

markup += "<h3><a href='#'>Controls</a></h3>";

$.each(elements, function (title, url) {
    markup += "<div><a href='" + url + "'>" + title + "</a></div>";
});

$("#accordion").append(markup);
$("#accordion").accordion();

So basically what I'm expecting is this markup structure at the end:

<h3><a href='#'>Controls</a></h3>
<div><a href='xxx'>Foo</a></div>
<div><a href='yyy'>Bar</a></div>
... etc

I'm not sure what I'm doing wrong here. I'm on a corp laptop with no way to install firefox or chrome so I can't look at the dynamic DOM to see if the structure is being created correctly or what.

Answer 1

maybe you are looking for add() and not append() .

Answer 2

If it's useful to anyone, the elements under a header section need to be contained in another element such as a DIV or P. Once I did that the sections and items ended up being arranged correctly.

Thanks!