javascript - Collapse with dynamic accordions -
<div class="panel-group" id="accordion"> {{#each forms}} <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href=".collapse"> {{fid}}</a> </h4> </div> <div class="panel-collapse collapse"> <div class="panel-body"> {{> form}} </div> </div> </div> {{/each}} </div> <template name="form"> <li class="list-group-item list-group-item-warning">first name : {{fname}}</li> <li class="list-group-item list-group-item-warning">last name : {{lname}}</li> <li class="list-group-item list-group-item-warning">analysis : {{ydata}}</li> </template> i using bootstrap meteor. have created form adds accordions dynamically according form data. accordions added successfully. problem collapses first accordion if click second or third one. how can make specific accordion collapse when being added dynamically?
it's referencing issue having. looking @ code, line
<a data-toggle="collapse" data-parent="#accordion" href=".collapse"> will repeated each of 3 accordions dynamically generated.
meaning href=".collapse" attribute in a tag each accordion pointing same <div class="panel-collapse collapse"> element. explains why first accordion (first of type) opens when click second or third accordion triggers.
to working: use dynamically generated id referencing on href attribute instead of class. in other words, use increment counter or along lines. , make sure generate matching id on collapse div element. example, have like:
<a data-toggle="collapse" data-parent="#accordion" href="{{#dynamicallygeneratedid}}"> ... then have like:
<div class="panel-collapse collapse" id="{{dynamicallygeneratedid}}"> ... so let's accordion 1 result in like:
<a data-toggle="collapse" data-parent="#accordion" href="#formone"> ... then panel body be:
<div class="panel-collapse collapse" id="formone"> ... all best of luck!
Comments
Post a Comment