Javascript 引导窗体手风琴不工作

我想创建的是，我有一个按钮，当我点击它时，会出现另外两个按钮，每个按钮点击后会显示另一个折叠的表单，现在的想法是，我希望一次只显示一个表单，因此，如果表单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>

用户名：
密码：

新用户名：
新密码：

---

问题是这两个表单一起出现，而不是单独出现，尽管它们具有相同的数据父级，所以有什么想法吗？

从顶部父级div中删除

折叠类

 <div id="local">



你能分享你的演示吗？你想要什么？