title: Bootstrap 3 collapse “data-parent” not working
body: <p>I try to use Bootstrap 3 collapse function to design a table to show two different HTML form. There is a problem, if i click form1, form1 can display correctly ,but if i click form2, form2 will show in under form1.</p>
  
  <p>I want when opening form2, form1 will be close and just show out form2.I try to use data-parent , but it still not work.</p>
  
  <p>I'm using the following HTML code:</p>
  
  <pre><code> &lt;div id="myAccordion" &gt;
                  &lt;table id="edit" class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail" &gt;
                      &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td width=50%&gt;&lt;button type="button" class="btn btn-info btn-lg" data-toggle="collapse" data-target="#form1" data-parent="#myAccordion"&gt;form1&lt;/button&gt;&lt;/td&gt;
                          &lt;td width=50%&gt;&lt;button type="button" class="btn btn-primary btn-lg" data-toggle="collapse" data-target="#form2" data-parent="#myAccordion"&gt;form2&lt;/button&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td colspan="2"&gt;
                              &lt;div id="form1" class="collapse"&gt;
                              . &lt;form  method="POST"  novalidate="novalidate"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="number1" class="control-label "&gt;number1&lt;/label&gt;
                                      &lt;input type="text" class="form-control" id="number1" name="number1" &gt;
                                      &lt;span class="help-block"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="number2" class="control-label "&gt;number2&lt;/label&gt;
                                      &lt;input type="text" class="form-control" id="number2" name="number2" &gt;
                                      &lt;span class="help-block"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="number3" class="control-label "&gt;number3&lt;/label&gt;
                                      &lt;input type="text" class="form-control" id="number3" name="number3" &gt;
                                      &lt;span class="help-block"&gt;&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;button type="submit" class="btn btn-success btn-block"&gt;submit&lt;/button&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                              &lt;div id="form2" class="collapse"&gt;
                                  . &lt;form  method="POST"  novalidate="novalidate"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="newinfo" class="control-label "&gt;info&lt;/label&gt;
                                          &lt;textarea class="form-control" rows="3" id="newinfo" name="newinfo"&gt; &lt;/textarea&gt;
                                          &lt;span class="help-block"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" class="btn btn-success btn-block"&gt;submit&lt;/button&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>What problem in my code?</p>