ユーザーが追加のパネルをアコーディオンに動的に追加できるようにする JQuery UI を使用してアコーディオンを作成しようとしています。追加のパネルが追加されると、デフォルトで開かれます。私はほとんどの道を歩みましたが、最後の部分で髪を引き裂きました。
<div id='accordion'>
<h4>Panel 1 Link</h4>
<div>
Panel 1 content goes here
</div>
<h4>Panel 2 Link</h4>
<div>
Panel 2 content goes here
</div>
</div>
<a href='#add' id='addPanel' onclick='addPanel(3)'>Add Panel</a>
Javascript
<script>
function addPanel(panelNo) {
var panelContent = "<h4>Panel " + panelNo + " Link</h4><div>Panel " + panelNo + " content goes here</div>"
$('#accordion').append(panelContent).accordion('destroy').accordion({collapsible: true, active: panelNo});
var newPanelBtn = panelNo + 1;
$('#addPanel').html("<a href='#add' id='addPanel' onclick='addPanel(" + newPanelBtn + ")'>Add Panel</a>");
}
</script>
パネルが追加されたときは正常に開いているが、別のパネルが選択されているときは閉じないという事実を除いて、すべてが正常に機能しています。