Calling an event in the Bootstrap expand panel

Question

I am working on a stream in which we use a Bootstrap style soundtrack (not compatible with jQuery UI accordion). The requirement is to call the service when the user expands the accordion. Here's the HTML:

<div class="accordion-dashboard"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading row-white" data-toggle="collapse" data-parent="#accordion" href="#runtimeValue"> <table> <tr> <td><span class="badge blue">A</span></td> <td><strong>Aenean ultricies est lorem,id feugiat velit euismod ut.Nullam inia.Prasent vel nu Sed ante mauris, eu lacus..</strong></td> <td><i class="icon8 icon-paperclip"></i></td> <td><span class="time">5 mins</span></td> </tr> </table> </div> <div id="runtimeValue" class="panel-collapse collapse "> <div class="panel-body"> <div class="row"> <div class="col-lg-9 col-lg-offset-1"> <table> <tr> <td class="text-muted">By</td> <td><img width="24px" src="images/company-logo.png"> Company Admin</td> </tr> <tr> <td class="text-muted">On</td> <td class="text-muted">Friday- 7 Aug 2014, 9.00PM</td> </tr> <tr> <td><i class="icon8 icon-paperclip"></i></td> <td>dummyfile.pdf</td> </tr> <tr> <td colspan="2"> <h5>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</h5> <p>Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p> </td> </tr> </table> </div> <div class="col-lg-1 pull-right"> <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn-close icon8"></span> </div> </div> </div> </div> </div> </div> </div> 

HREF , and the attributes of the conforming id will be determined at runtime, and I know about them. One approach might be event binding when you click the accordion, but I want it to be a last resort.

Is there any other way to call the service when the user clicks and expands the accordion?

Answer 1

According to the Bootstrap Source (admittedly, for the most recent version, 3.3.0), the shown.bs.collapse transition event shown.bs.collapse complete. You can connect to this.

Answer 2

You can use: -

 $('#accordion').on('show.bs.collapse', function () { //call a service here }); 

Answer 3

You can check this out for: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php . This will help.

 show.bs.collapse 

This event fires immediately after the show instance method is called.