Bootstrap Forms Accordion не работает

Question

Что я хочу создать, так это то, что у меня есть кнопка, и когда я его clcik, еще две кнопки появляются, и каждая из этих кнопок после щелчка показывает другую свернутую форму, теперь идея в том, что я хочу только 1 форма появится в одно время, так что если форма 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> 

probelm является 2 формы появляются вместе, а не каждый в одиночку хотя у них одинаковые данные-родительские, поэтому любые идеи?

Answer 1

Удалите класс collapse из верхнего родительского div.

<div id="local"> 

jsFiddle.