次のコードがあります
<g:each in="${elementGroups}">
<div class="accordion" id="accordion${it.id}">
<!-- Element Group Heading -->
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion${it.id}" href="#collapse${it.id}">
<b>${it.name}</b>
</a>
</div>
<!-- Elements -->
<div id="collapse${it.id}" class="accordion-body collapse">
<g:each var="element" in="${it.elements}">
<!-- -->
<div class="accordion" id="accordion${it.id}-${element.id}">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion${it.id}-${element.id}" data-target="#collapseOne${it.id}-${element.id}">
<input type="radio" name="optionsCheckboxList" value="${element.id}"/>${element.name}
</label>
</div>
<div id="collapseOne${it.id}-${element.id}" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<g:each var="desc1" in="${element.descriptions}">
<input type="radio" name="selComment" value="${desc1.name}" onclick="populateComment(this.value)"/>${desc1.name}<br/>
</g:each>
</div></div>
</div>
<!-- -->
</g:each>
</div>
</div>
</g:each>
正しい ID と親 ID を持つ 2 つのレベルのアコーディオンがあることに注意してください。いずれも初展開。何かを変更すると、アコーディオンが拡張しなくなります。何が問題になる可能性があります。