how to access the bootstrap collapse method using javascript

Question

I am using the bootstrap collapse class. My HTML Code:-

                   <div class="panel-group">
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <input type="checkbox" id="select" data-toggle="collapse" data-target="#collapse1"> Please Select
                          </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse">
                          <div class="panel-body">
                          </div>
                          <div class="panel-footer">

                          </div>
                        </div>
                      </div>
                    </div>

I want to access this in Javascript. What I want is when I click the checkbox or when the panel collapsed I want to do something during that time. How to access the collapse using javascript? I am trying this code:-

 $('.collapse').on('hide.bs.collapse', function () {
       //my funcionality here
   });

But this is not working. Can anyone tell me what is wrong in this code.

Answer 1

According to bootstrap documentation, your jquery selector is wrong. You should pass div id which is going to be a collapse.

$('#collapse1').on('hide.bs.collapse', function () {
       //my funcionality here
});