title: Call an event on Bootstrap panel expand
body: <p>I am working on a flow where we are using Bootstrap styled accordion (NOT jQuery UI accordion). The requirement is to call a service when the user expands the accordion. Here's the HTML:</p>
  
  <pre><code>&lt;div class="accordion-dashboard"&gt;
      &lt;div class="panel-group" id="accordion"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading  row-white" data-toggle="collapse" data-parent="#accordion" href="#runtimeValue"&gt;                 
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;span class="badge blue"&gt;A&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;strong&gt;Aenean ultricies est lorem,id feugiat velit euismod ut.Nullam inia.Prasent vel nu Sed ante mauris, eu lacus..&lt;/strong&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;i class="icon8 icon-paperclip"&gt;&lt;/i&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="time"&gt;5 mins&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;                    
                  &lt;/table&gt;                        
              &lt;/div&gt;
              &lt;div id="runtimeValue" class="panel-collapse collapse "&gt;
                  &lt;div class="panel-body"&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-9 col-lg-offset-1"&gt;
                              &lt;table&gt;
                                  &lt;tr&gt;
                                      &lt;td class="text-muted"&gt;By&lt;/td&gt;
                                      &lt;td&gt;&lt;img width="24px" src="images/company-logo.png"&gt; Company Admin&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td class="text-muted"&gt;On&lt;/td&gt;
                                      &lt;td class="text-muted"&gt;Friday- 7 Aug 2014, 9.00PM&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;i class="icon8 icon-paperclip"&gt;&lt;/i&gt;&lt;/td&gt;
                                      &lt;td&gt;dummyfile.pdf&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td colspan="2"&gt;
                                          &lt;h5&gt;Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.&lt;/h5&gt;
                                          &lt;p&gt;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.&lt;/p&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-1 pull-right"&gt;
                              &lt;span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn-close icon8"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p><code>HREF</code> attribute and the correspoding <code>id</code> attributes will be decided at runtime and I am aware of the pattern of them. One approach could be binding an event on click of the accordion, but I want to have it as a last resort.</p>
  
  <p>Is there any other way I can call a service when the user clicks and expands the accordion?</p>