Bootstrap Forms Accordion不起作用

时间:2015-10-13 10:10:44

标签: javascript html node.js twitter-bootstrap

我想要创建的是我有一个按钮,一旦我抓住它,就会出现另外两个按钮,每次点击这个按钮会显示另一个折叠的形式,现在的想法是,我想只需要一个表格就可以出现在一个按钮上时间,所以如果表单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>

问题是2个表单一起出现而不是每个表单虽然它们具有相同的数据 - 父级,所以任何想法?

1 个答案:

答案 0 :(得分:2)

从顶部父div中删除collapse类。

 <div id="local">

jsFiddle.