ページ内の複数のリンクのjQuery show（）とhide（）

Question

私は、divで隠された対応する質問に対して3つのフォームを持つWebページをコーディングしています。この機能のために単純な.accordion-toggleをブートストラップのフレームワークに使用しています。

• ユーザーはそれがダウンして切り替えます「質問する」ボタンを選択します
  （.accordion-トグルを使用）、フォームは「質問する」リンクが消えなければならない（）皮を使用してappears-。

• フォームに投稿ボタンがあり、キャンセルリンク - キャンセルリンクによりフォームが折りたたまれて（ブートストラップ.collapseを使用して）トリガされると同時に、[Ask a question]ボタンが再度表示されます。

  jQueryのshow（）メソッドとhide（）メソッドを使用して動作させることができます。しかし、同じページに3つのキャンセルボタンがあると、正しいdivを適切に折りたたむために、各リンクに一意の識別子を付ける方法がわかりません。

下記のフィディは、これまでのところ最も近い解決策です。

See @DanielAlmeida Fiddle 
https://jsfiddle.net/ek57ao0y/ 
    <div class='form form0'> 
     <ul> 
     <li><a href="#" class='showForm' data-target='.form1'>Show form 1</a></li> 
     <li><a href="#" class='showForm' data-target='.form2'>Show form 2</a></li> 
     <li><a href="#" class='showForm' data-target='.form3'>Show form 3</a></li> 
     <li><a href="#" class='showForm' data-target='.form4'>Show form 4</a></li> 
     </ul> 
    </div> 

    <div class='form form1'> 

     <h3>Form 1</h3> 
     <div> 
     <textarea name="" id="" cols="30" rows="10"></textarea> 
     </div> 

     <p> 
     <a href="#" class='cancel' data-target='.form0'>Cancel</a> 
     </p> 

    </div> 

    <div class='form form2'> 

     <h3>Form 2</h3> 
     <div> 
     <textarea name="" id="" cols="30" rows="10"></textarea> 
     </div> 

     <p> 
     <a href="#" class='cancel' data-target='.form0'>Cancel</a> 
     </p> 

    </div> 

    <div class='form form3'> 

     <h3>Form 3</h3> 
     <div> 
     <textarea name="" id="" cols="30" rows="10"></textarea> 
     </div> 

     <p> 
     <a href="#" class='cancel' data-target='.form0'>Cancel</a> 
     </p> 

    </div> 

    <div class='form form4'> 

     <h3>Form 4</h3> 
     <div> 
     <textarea name="" id="" cols="30" rows="10"></textarea> 
     </div> 

     <p> 
     <a href="#" class='cancel' data-target='.form0'>Cancel</a> 
     </p> 

    </div> 

Answer 1

これは、正しい要素を隠して表示していることを確認することで、周囲のコードを少し変更することで実現できます。以下はあなたのために仕事をする必要があります。

$(function() { 
 
    $(".submit-collapse").click(function(){ 
 
     $(".contact-form").show(); 
 
     $(".submit-collapse").hide(); 
 
    }); 
 
    $(".cancel-link").click(function(){ 
 
     $(".contact-form").hide(); 
 
     $(".submit-collapse").show(); 
 
    }) 
 
});

.contact-form{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-trigger top-spaced hidden-md hidden-sm hidden-xs"> 
 
    <div class="panel panel-default no-border"> 
 
    <div class="panel-heading"> 
 
     <h4 class="drk-grey"> 
 
     Have another question? <a class="accordion-toggle collapsed collapsed grn-btn full-window-btn submit-collapse" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Submit Your Question </a> 
 
     </h4> 
 
    </div> 
 
    <form class="contact-form" action="/mailers/faq_contact_us" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="L+9iNJ7+yKMBBIFsSv0nEzet6tit4bfxTaoUNbopARhIzoN/GL3fn40AaY1sV095jddz6fXzs0p20axPIfki+A==" /> 
 
      <div class="spaced"> 
 
      <label for="name">Name</label><input type="text" name="name" id="name" class="form-control" required="required" /> 
 
      </div> 
 
      <div class="row spaced"> 
 
      <div class="col-md-6"> 
 
       <label for="email">Email</label><input type="email" name="email" id="email" class="form-control" required="required" email="true" /> 
 
      </div> 
 
      <div class="col-md-6"> 
 
       <label for="primary_phone">Phone</label><input type="tel" name="primary_phone" id="primary_phone" class="form-control" required="required" phone="true" /> 
 
      </div> 
 
      </div> 
 
      <div class="spaced"> 
 
      <label for="message">Message</label><textarea name="message" id="message" class="form-control" required="required" rows="10" maxLength="1000"> 
 
</textarea> 
 
      </div> 
 
      <div class="spaced"> 
 
      <input type="submit" name="commit" value="Submit Question" class="btn btn-small text-center" /><a class="accordion-toggle collapsed collapsed cancel-link" data-parent="#accordion" data-toggle="collapse" href="#question-about-app-process">Cancel</a> 
 
      </div></form> 
 

 
    </div>

Answer 2

あなたは親（）関数を使用することができます

「私はきちんと正しいのdivを折りたたむには、各リンクに固有の識別子を添付するかどうかはわかりません」。例：このコードは、このリンクは、親divの...内部のすべてを削除します。あなたの原因で

<div>blablabla something <a href='#null' onclick="$(this).parent(\'div\').remove();">Remove</a></div> 

、あなたは、「削除」ではなくcolapse関数を呼び出す使用することはありません。