Problem applying Accordion after change in list

Problem applying Accordion after change in list


Hi there,
I would like to use the Interface Accordion plugin on a site I am
working on. The contents of the list to which the formatting is to be
applied are changed dynamically based on search results. Currently I'm
testing with a dummy XML file of results and I'm running into
problems.
If I add static data to the list as follows:
            <div class="results">
                <dl id="locationlist">
                    <dt>Lorem ipsum dolor</dt>
                    <dd>
                        

Lorem ipsum dolor sit amet.


                        

Ut quis massa.


                    </dd>
                    <dt>Ut quis massa</dt>
                    <dd>
                        

Ut quis massa.


                    </dd>
                </dl>
            </div>
And then apply accordion on document load:
$(function() {
    // Format the list
    $('#locationlist').Accordion(
        {
            headerSelector    : 'dt',
            panelSelector    : 'dd',
            activeClass    : 'myAccordionActive',
            hoverClass        : 'myAccordionHover',
            panelHeight    : 200,
            speed        : 150
        }
    );
});
Everything seems to work fine. If however I change the list and
reapply Accordion:
function UpdateList()
{
    // Grab the location list and clear it's contents
    locationList = $('#locationlist');
    locationList.empty();
    // Open the locations.xml file
    $.get("locations.xml",{},function(xml){
        locationHtml = '';
        // Run the function for each student tag in the XML file
        $('location',xml).each(function(i) {
            // Build row HTML data and store in string
     locationHtml += '<dt>' + $(this).find("name").text()+
'</dt>';
     locationHtml += '<dd>';
     locationHtml += '

Accepted materials: ' + $
(this).find("materials").text()+ '

';
     locationHtml += '

'+ $(this).find("address").text()
+'

';
     locationHtml += '

Managed by: '+ $
(this).find("managedby").text()+'

';
     locationHtml += '</dd>';
        });
        locationList.append(locationHtml);
    });
    // Format the list
    locationList.Accordion(
        {
            headerSelector    : 'dt',
            panelSelector    : 'dd',
            activeClass        : 'myAccordionActive',
            hoverClass        : 'myAccordionHover',
            panelHeight        : 200,
            speed            : 150,
            onShow            : 'ListSelectionChanged'
        }
    );
}
It no longer works (the list does not collapse). Does anyone have any
idea what I'm doing wrong?
Thanks :)