JQuery UI zum Akkordeon hinzufügen

Question

Hier ist die Demo für das Akkordeon-Widget von JQuery UI. Ich habe eins auf meiner Seite, und die Methode, um Elemente darin zu platzieren (wie auf der Demo-Seite gezeigt), ist wie folgt:

  Abschnitt 1

    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

  Abschnitt 2

    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.

  Abschnitt 3

    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

      Listenelement eins
      Listenelement zwei
      Listenelement drei

  Abschnitt 4

    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.

    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.

Beachten Sie, wie für jedes Element die folgende Struktur vorhanden ist:

Titel

Text

. Ich möchte in der Lage sein, dynamisch zu diesem Akkordeon hinzuzufügen; aber als ich einfach versuchte, diese Struktur dem Akkordeon hinzuzufügen, hat es nicht funktioniert. Ich habe in meine Chrome-Konsole geschaut und gesehen, dass JQuery allen möglichen Klassen und Eigenschaften zu den einfach aussehenden Elementen des Elements hinzufügt. Nun ist der offensichtliche Weg, dies zu lösen, anstatt`

Titel

`hinzuzuzufügen,

Titel

Und ebenso für jedes andere Element. Ich weiß, dass dies funktionieren sollte, aber es sieht hässlich aus und ich frage mich, ob JQuery uns eine nette Funktion zur Verfügung gestellt hat, um all diese Dinge für uns zu erledigen. Wenn nicht, kann jemand einen weniger lästigen Weg vorschlagen, um dies zu tun?

EDIT: Als Antwort auf alle Antworten, die vorschlagen, das Akkordeon neu zu erstellen: Ich weiß, dass dies wahrscheinlich eine bessere Idee ist als die oben gezeigte Methode, aber ist es möglich, nur den HTML-Block zu "akkordeonisieren", den ich benötige, anstelle des gesamten Akkordeons, der ziemlich groß werden kann?

Answer 1

Erstellen Sie das Akkordeon einfach neu, wenn Sie neue Daten hinzufügen:

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

Answer 2

Das einzige kritische HTML ist die Hauptstruktur:

  Abschnitt 1

 Abschnitt 2

Sie können alles, was Sie möchten, in die DIV-Inhaltsfelder einfügen.

Wenn Sie einen neuen Satz von h3 und div hinzufügen, zerstören und erstellen Sie das Akkordeon neu:

var newPanel='Neuer AbschnittNeuer Inhalt';
$('#accordion').append(newPanel).accordion('destroy').accordion( /* Optionen */ );