JQuery accordion not working with Javascript created content

Question

I am looking to use a form to add items to an array in Javascript and then use he values to be displayed in accordion.

However, when I create a string of the values and add them to the HTML file, the accordion doesn't work. It is in exactly the same format when it is added than when it is entered manually.

When I enter the same code manually, the accordion works no problem

Any Ideas?

Thanks

Code to create string:

contact.prototype.contactList= function(){
var cl = "<h3>" + this.firstname + "</h3><div><p>" +
         this.middlename + "" + this.lastname + "" + this.homeadd1 + ""+ this.homeadd2 + ""+ this.homeadd3 + ""+ this.homepost + ""+ this.workadd1 + ""+ this.workadd2 + ""+ this.workadd3 + ""+ this.workpost + ""+ this.email + ""+ this.homephone + ""+ this.workphone +""+ this.mobilephone +""+ this.dob +""+ this.relstat +"</p></div>";

return cl;

};

JS Accordion Function:

$('#accordion').on('update', 'h3', function() {
            $( "#accordion" ).accordion();
        });

The id I am adding the content to is called accordion

Thanks in advance for your help

Answer 1

Check API of jqueryui.

Maybe you need to use refresh.

http://api.jqueryui.com/accordion/#method-refresh