Bootstrap表单Accordion不起作用

我想创build的是,我有一个button,一旦我clcik它,2个更多的button出现,每个button一次点击显示另一个崩溃的forms,现在的想法是,我只想要一个forms出现在一次,所以如果窗体1打开,2即将出现窗体1应该崩溃,所以这里是我的代码:

<div id="local" class="collapse"> <a data-toggle="collapse" data-parent="#ccvc" href="#local-sign-in" class="btn btn-default btn-md" role="button">I already have an account</a> <a data-toggle="collapse" data-parent="#ccvc" href="#local-reg" class="btn btn-default btn-md" role="button">I need to make an account</a> </div> <div class="form-group" id="ccvc"> <form id="local-sign-in" class="collapse" action="/login" method="post"> <div> <p></p> <label>Username:</label> <input type="text" name="username"/> </div> <div> <label>Password:</label> <input type="password" name="password"/> </div> <div> <input type="submit" class="btn btn-primary btn-sm" value="Log In"/> </div> </form> <form id="local-reg" class="collapse" action="/local-reg" method="post"> <div> <p></p> <label>New Username:</label> <input type="text" name="username"/> </div> <div> <label>New Password:</label> <input type="password" name="password"/> </div> <div> <input type="submit" class="btn btn-primary btn-sm" value="Register"/> </div> </form> </div> 

问题是两种forms出现在一起,虽然他们有相同的数据父母,但不是每一个人都有,所以有什么想法?

从最顶层的父div中移除collapse类。

  <div id="local"> 

的jsfiddle。