CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
Khurram W. Malik
Khurram W. Malik

Reputation: 2895

How to toggle bootstrap collapse from angularjs

I am trying to toggle bootstrap collapse programmatically which is 

 <div class="panel-heading" role="tab" id="headingStores">
                                <h4 class="panel-title">
                                    <span class="collapsed" id="StoresPanel" role="button" data-toggle="collapse" data-parent="#filter-field-container" href="#filterStores" aria-expanded="false" aria-controls="filterStores">
                                        <i class="fa fa-chevron-circle-right"></i><i class="fa fa-chevron-circle-down"></i>  Stores
                                        <span ng-if="showStore" class="pull-right">{{countStore}}</span>
                                    </span>
                                </h4>
                            </div>

My angular code is 

    var domElement = document.getElementById('StoresPanel');

    angular.element(domElement).collapse('show');

But collapse('show') is not invoking the toggle functionality. Kindly help !

Upvotes: 3

Views: 3108

Answers (1)

bob
bob

Reputation: 2734

A bit late but, I am using bootstrap's collapse component (not angular ui bootstrap) and wanted to control it from my angular1 controller, then you can do like (jQuery would need to be loaded):

 const el = document.querySelector(target);
 if (!angular.element(el).hasClass('in')) { // hidden
     $(el).collapse('show');
 }

Upvotes: 3

Related Questions