除第一次外，两个级别的手风琴都无法正常工作

Question

I have the following code

<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>

Note that there are two levels of accordions with correct id and parent id. They all expand for first time. Once i change something, accordions are not expanding anymore. What could be the problem.

Answer 1

You are missing a <div class="accordion-group"> around your accordion-heading and accordion-body . That may be causing you issues. Refer to the example on http://twitter.github.com/bootstrap/javascript.html#collapse and view the source to see how they implement it.