title: bootstrap accordion not working with table inside it
body: <p>I have three accordions. In one of my accordion I have a table. As the behaviour of bootstrap accordion, only one will open at a time. From the time I put it in the page it was not working accordingly. I spend my whole day finding solution for it and at last I thought of putting question here and while I was writing my question title, I found a suggestion saying accordion problem with datatable. Instantly I commented my table and now accordian work. Does anybody know anything about this as I need to have that table inside my accordion.</p>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;div class="panel-group" id="accordian1"&gt;
                          &lt;div class="panel panel-danger"&gt;
                              &lt;div class="panel-heading"&gt;
                                  &lt;h4 class="panel-title"&gt;
                                      &lt;a role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseOne"&gt;
                                          Cost
                                      &lt;/a&gt;
                                  &lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div id="collapseOne" class="panel-collapse in"&gt;
                                  &lt;div class="panel-body" style="text-align:justify;"&gt;
                                      &lt;p&gt;some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text&lt;/p&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="panel panel-danger"&gt;
                              &lt;div class="panel-heading"&gt;
                                  &lt;h4 class="panel-title"&gt;
                                      &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseTwo"&gt;
                                          some text
                                      &lt;/a&gt;
                                  &lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
                                  &lt;div class="panel-body" style="text-align:justify;"&gt;
  
                                      &lt;p&gt;some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text&lt;/p&gt;
  
                                      &lt;div class="table-responsive"&gt;
                                          &lt;table class="table table-bordered table-hover table-striped"&gt;
                                              &lt;thead&gt;
                                                  &lt;tr&gt;
                                                      &lt;th&gt;some text&lt;/th&gt;
                                                      &lt;th style="width: 171px;"&gt;some text&lt;/th&gt;
                                                      &lt;th&gt;some text&lt;/th&gt;
                                                  &lt;/tr&gt;
                                              &lt;/thead&gt;
                                              &lt;tbody&gt;
                                                  &lt;tr&gt;
                                                      &lt;td&gt;some text&lt;/td&gt;
                                                      &lt;td&gt;some textsome text&lt;/td&gt;
                                                      &lt;td&gt;
                                                          &lt;p&gt;some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text&lt;/p&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                                  &lt;tr&gt;
                                                      &lt;td&gt;some text&lt;/td&gt;
                                                      &lt;td&gt;some textsome text&lt;/td&gt;
                                                      &lt;td&gt;some textsome textsome text&lt;/td&gt;
                                                  &lt;/tr&gt;
                                                  &lt;tr&gt;
                                                      &lt;td&gt;some text&lt;/td&gt;
                                                      &lt;td&gt;some text&lt;/td&gt;
                                                      &lt;td&gt;
                                                          &lt;p&gt;some textsome textsome textsome textsome textsome textsome textsome text&lt;/p&gt;
                                                      &lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/tbody&gt;
                                          &lt;/table&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="panel panel-danger"&gt;
                              &lt;div class="panel-heading"&gt;
                                  &lt;h4 class="panel-title"&gt;
                                      &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseThree"&gt;
                                          Job Prospect
                                      &lt;/a&gt;
                                  &lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
                                  &lt;div class="panel-body" style="text-align:justify;"&gt;
                                      &lt;p&gt;some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text&lt;/p&gt;
                                      &lt;p&gt;some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text.&lt;/p&gt;
  
                                      &lt;b&gt;some text bbbbb&lt;/b&gt;&lt;br /&gt;
                                      &lt;p&gt;some textsome textsome textsome textsome textsome text.&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>