jQuery show() и hide() для нескольких ссылок на странице

Question

Я кодирую веб-страницу, которая будет иметь три формы для соответствующих вопросов, скрытых в divs. Я использую простой механизм .accordion-toggle для этой функции в фреймворке bootstrap.

• Когда пользователь выбирает кнопку «Задать вопрос» он переключает вниз (используя .accordion-переключатель) и форма appears- с помощью скройте() «Задать вопрос» ссылка должна исчезнуть.

• Форма будет иметь кнопку «Отправить», чтобы опубликовать форму, но также и ссылку отменить ссылку - ссылка на отмену должна вызывать форму, чтобы свернуть (используя загрузку .collapse), одновременно кнопка «Спросить вопрос» должна появиться снова ,

  Я могу заставить его работать с помощью метода show() и hide() в jQuery. Однако с тремя кнопками отмены на той же странице я не уверен, как присоединить уникальный идентификатор к каждой ссылке, чтобы правильно свернуть правильный 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 вместо этого.