jquery - Bootstrap Accordion with dynamic ajax content -
i want create accordion content ajax.
so, html :
<div class="latestinfo panel-group" id="accordion" role="tablist" aria-multiselectable="true"> // dynamic content here </div>
and success ajax :
success: function(data) { data.items.foreach(function(e) { $('.latestinfo').append('<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingone"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone">' + e.title + '</a></h4></div><div id="collapseone" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingone"><div class="panel-body">' + e.content + '</div></div></div>'); }); }
currently ,
- the content displayed
- when click first 1 open
- when click other, first toggle ( open / close )
the problem accordion not working correctly describe above.
thanks !
an id
must unique (say loud , imagine echo)...
you can use index
provided .foreach()
create unique id
.
;)
and can use +
concatenate string on multiple lines...
improves readability.
// assuming json. var data = {items:[{title:"one",content:"something-1"}, {title:"two",content:"something-2"}, {title:"three",content:"something-3"} ] }; var success = function(data) { data.items.foreach(function(item,index) { $('.latestinfo').append( '<div class="panel panel-default">'+ '<div class="panel-heading" role="tab" id="heading_'+index+'">'+ '<h4 class="panel-title">'+ '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_'+index+'" aria-expanded="true" aria-controls="collapse_'+index+'">'+ item.title+ '</a>'+ '</h4>'+ '</div>'+ '<div id="collapse_'+index+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading_'+index+'">'+ '<div class="panel-body">'+ item.content+ '</div>'+ '</div>'+ '</div>' ); }); } // feaking ajax response... success(data);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <div class="latestinfo panel-group" id="accordion" role="tablist" aria-multiselectable="true"> // dynamic content here </div>
Comments
Post a Comment