Geek Answers Handbook

Bootstrap collapse does not work when creating

I retrieve my content using an ajax call and create all resettable panels at runtime. but the switching function does not work that way. I use the basic puppet collection and item view to create my group group.

I checked with static content and works fine with static data.

I checked a few links, but in my case nothing works.

How to make Twitter Bootstrap Collapse work on dynamically loaded html using ajax

https://github.com/twbs/bootstrap/issues/2274

Here my html looks like this:

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <ul class="home_nav" data-toggle="collapse" data-parent="#accordion"
                data-target="NewsMaintenanceMenu">
                ...
            </ul>
            <span class=""><i class="glyphicon glyphicon-chevron-right"></i></span>
        </div>
        <div id="NewsMaintenanceMenu" class="panel-collapse collapse">
            <div class="panel-body">
                <table class="table table-striped">
                    <tbody>
                        ....
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
+4
source share
3 answers

jQuery .

   $(".panel").on("click", function(e){
              var $_target =  $(e.currentTarget);
              var $_panelBody = $_target.find(".panel-collapse");
              if($_panelBody){
                $_panelBody.collapse('toggle')
              }
        })
+3

.collapse() ajax. , , .

0
<div class="col-sm-4" ng-repeat="Category in categoryList">
<!-- Category -->
<div class="dropdown">
    <button class="dropbtn" ng-bind="Category.name"></button>
    <div class="dropdown-content">
        <a href="" title="">Business <span class="pull-right">13</span></a>
        <a href="" title="">Technology <span class="pull-right">13</span></a>
        <a href="" title="">Web <span class="pull-right">13</span></a>
        <a href="" title="">Ecommerce <span class="pull-right">13</span></a>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <!-- <div class="panel-heading"> -->
                <div class="panel-title">

        <a href="#{{Category.name}}" data-toggle="collapse" data-parent="#accordion" title="">View More <span class="pull-right"></span></a>
       </div>
    <!-- </div> -->
    <div id="{{Category.name}}" class="panel-collapse collapse ">
        <div class="panel-body">
                <a href="" title="">Business <span class="pull-right">13</span></a>
                <a href="" title="">Technology <span class="pull-right">13</span></a>
                <a href="" title="">Web <span class="pull-right">13</span></a>
                <a href="" title="">Ecommerce <span class="pull-right">13</span></a>
        </div>
      </div>
      </div>
      </div>
      </div>
      </div>
    </div>
0
source

More articles:


All Articles