我尝试使用Bootstrap 3 collapse 的功能设计一个table 来显示两个不同的HTML表单。這有一个问题，如果我单击Form1，Form1可以正确显示，但如果我点击Form2，Form2将在Form1下面显示。

我的想法是打开Form2时，Form1會關上，只是显示出form2。我尝试使用data-parent，但它仍然无法達到我想要的效果。

我的code有錯嗎?

我使用的code

 <div id="myAccordion">
            <table id="edit" class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail" >
                <tbody>
                <tr>
                    <td width=50%><button type="button" class="btn btn-info btn-lg" data-toggle="collapse" data-target="#form1" data-parent="#myAccordion">form1</button></td>
                    <td width=50%><button type="button" class="btn btn-primary btn-lg" data-toggle="collapse" data-target="#form2" data-parent="#myAccordion">form2</button></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="form1" class="collapse">
                        . <form  method="POST"  novalidate="novalidate">
                            <div class="form-group">
                                <label for="number1" class="control-label ">number1</label>
                                <input type="text" class="form-control" id="number1" name="number1" >
                                <span class="help-block"></span>
                            </div>
                            <div class="form-group">
                                <label for="number2" class="control-label ">number2</label>
                                <input type="text" class="form-control" id="number2" name="number2" >
                                <span class="help-block"></span>
                            </div>
                            <div class="form-group">
                                <label for="number3" class="control-label ">number3</label>
                                <input type="text" class="form-control" id="number3" name="number3" >
                                <span class="help-block"></span>
                            </div>
                            <button type="submit" class="btn btn-success btn-block">submit</button>
                        </form>
                    </div>
                        <div id="form2" class="collapse">
                            . <form  method="POST"  novalidate="novalidate">
                                <div class="form-group">
                                    <label for="newinfo" class="control-label ">info</label>
                                    <textarea class="form-control" rows="3" id="newinfo" name="newinfo"> </textarea>
                                    <span class="help-block"></span>
                                </div>
                                <button type="submit" class="btn btn-success btn-block">submit</button>
                            </form>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
       </div>