Bootstrap Forms手风琴无法正常工作

Question

What i want to create is that i have a button and once i clcik it, 2 more buttons appear and each of this button once clicked shows another collapsed form, now the idea is , i want only 1 form to appear at one time so if form 1 is opened and for 2 is about to appear form 1 should collapse so here is my code :

    <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>

The probelm is the 2 forms appear together and not each one alone although they have the same data-parent , so any ideas ?

Answer 1

Remove the collapse class from the top parent div.

 <div id="local">

jsFiddle.