Der Aufbau des HMTL-Gerüsts des Akkordeons von jQuery UI ist sehr einfach:

<div id="accordion">	<h3><a href="#">Bereich 1</a></h3>	<div>	<p>Text 1</p>	</div>	<h3><a href="#">Bereich 2</a></h3>	<div>	<p>Text 2</p>	</div>	<h3><a href="#">Bereich 3</a></h3>	<div>	<p>Text 3</p>	</div>
</div>

Anschließend erfolgt die Initialisierung per JavaScript mit jQuery:

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

Ein neuer Bereich kann mit der jQuery Funktion .append()(http://api.jquery.com/append/) hinzugefügt werden:

$('#accordion').append('<h3><a href="#">Bereich 4</a></h3><div><p>Text 4</p></div>');

Allerdings wird dieser neue Bereich nicht korrekt angezeigt und kann nicht aufgeklappt werden, weil jQuery diese Elemente noch nicht kennt. Ein einfaches neues Initialisieren mit .accordion() funktioniert nicht, da die entsprechenden Klassen für die HTML-Elemente schon gesetzt sind. Stattdessen muss das Akkordeon komplett zurückgesetzt (zerstört) werden und wieder neu initialisiert werden:

$( "#accordion" ). accordion('destroy').accordion();