Почему моя форма не работает?

Question

В настоящее время у меня есть кнопка, которая при нажатии отображает 2 ссылки в форме. Когда вы нажимаете на одну из ссылок формы, должна отображаться другая форма. Но по какой-то причине я не могу показать вторую форму; когда я нажимаю на ссылку второй формы, она либо закрывает первую форму, либо открывает первую форму.

Почему моя форма не работает? Вот пример кода.

 $("#formButton1").click(function () {
      $("#form1").toggle();
      $("#form2").toggle();
 });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
 <button type="button" class="btn btn-primary" id="formButton1" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"></button>
 <form id="form1" method="post" style="display:none;">
      <div class="card">
           <div class="card-header" role="tab" id="headingTwo">
                <h5 class="mb-0">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                          Vault Status
                     </a>
                </h5>
           </div>
           <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="card-block">
                     <div class="form-group">
                          <div class="form-group">
                              <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                          </div>
                          <label for="exampleFormControlSelect2">Select Environment</label>
                          <select multiple class="form-control" id="test1">
                               <option>RTP Prod</option>
                               <option>OMA Prod</option>
                               <option>BGI</option>
                               <option>BG2</option>
                               <option>Cloud</option>
                               <option>Workstation</option>
                               <option>QA</option>
                               <option></option>
                          </select><br />
                          <button type="submit">Submit</button>
                     </div>
                </div>
           </div>
      </div>
 </form>

 <form id="form2" method="post" style="display:none;">
      <div class="card">
           <div class="card-header" role="tab" id="headingTwo">
                <h5 class="mb-0">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                          Form 2
                     </a>
                </h5>
           </div>
           <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
           <div class="card-block">
                <div class="form-group">
                     <div class="form-group">
                         <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                     </div>
                     <label for="exampleFormControlSelect2">Select Environment</label>
                     <select multiple class="form-control" id="test2">
                          <option>Test</option>
                          <option>OMA Prod</option>
                          <option>BGI</option>
                          <option>BG2</option>
                          <option>Cloud</option>
                          <option>Workstation</option>
                          <option>QA</option>
                          <option></option>
                     </select><br />
                     <button type="submit">Submit</button>
                     </div>
                </div>
           </div>
      </div>
 </form>

Answer 1

В вашем коде отсутствует ссылка на библиотеку Bootstrap. Убедитесь, что вы включили его как для загрузочного css, так и для javascript:

Вам нужно изменить идентификатор div для form1. Я переименовал его в collapseOne

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

$("#formButton1").click(function () {
      $("#form1").toggle();
      $("#form2").toggle();

    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <button type="button" class="btn btn-primary" id="formButton1" 
        style="background-color:#EEEEEE; border-color:darkgrey; color:black;"> 
        </button>
            
            
            <form id="form1" method="post" style="display:none;">
                <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                        <h5 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="font-size:15px;">
                                Vault Status
                            </a>
                        </h5>
                    </div>
                    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="card-block">
                            <div class="form-group">
                                <div class="form-group">

                                    <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                                </div>
                                <label for="exampleFormControlSelect2">Select Environment</label>
                                <select multiple class="form-control" id="test1">
                                    <option>RTP Prod</option>
                                    <option>OMA Prod</option>
                                    <option>BGI</option>
                                    <option>BG2</option>
                                    <option>Cloud</option>
                                    <option>Workstation</option>
                                    <option>QA</option>
                                    <option></option>
                                </select><br />
                                <button type="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <form id="form2" method="post" style="display:none;">
                <div class="card">
                    <div class="card-header" role="tab" id="headingTwo">
                        <h5 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                                Form 2
                            </a>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="card-block">
                            <div class="form-group">
                                <div class="form-group">

                                    <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                                </div>
                                <label for="exampleFormControlSelect2">Select Environment</label>
                                <select multiple class="form-control" id="test2">
                                    <option>Test</option>
                                    <option>OMA Prod</option>
                                    <option>BGI</option>
                                    <option>BG2</option>
                                    <option>Cloud</option>
                                    <option>Workstation</option>
                                    <option>QA</option>
                                    <option></option>
                                </select><br />
                                <button type="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>