yeniden konumlandırmak div tıklama yere göre

Question

Birden, özdeş gizli formları içeren bir sayfa, her gibi ayrı bir gizli DIV içerdiği vardır: bunların hepsi sahip Yerine

<div class="product-intro-text">Some text.... 
    <div class="rfq-button"><a class="advantage-button" id="Adapters" href="#">Request a Quote</a></div> 
    <div class="inline-rfq"> 
      <form class="contact" name="contact" action="#" method="post">...</form> 
    </div> 
</div> 
<div class="h-sep"></div> 
<div class="product-intro-text">Some text.... 
    <div class="rfq-button"><a class="advantage-button" id="Auger&nbsp;Equipment" href="#">Request a Quote</a></div> 
    <div class="inline-rfq"> 
      <form class="contact" name="contact" action="#" method="post">...</form> 
    </div> 
</div> 

:

HTML özdeş gizli DIV'ler, .inline-RFQ DIV'inin, tıklanan ilgili .rfq düğmesinin altında görünmesini nasıl yeniden konumlandırabilirim? Bu bir mobil site içindir, bu yüzden çözümler mobil uyumlu olmalıdır. peşin Yardımlarınız için

jQuery(document).ready(function($){ 
/* toggle form */ 
$(".rfq-button").on("click", function(){ 
    $(this).next().slideToggle(); 
    $(".inline-rfq").next().toggleClass("display"); 
}); 
}); 

Teşekkür: Zaten burada sayfanın geri kalanı boyunca JS/JQuery kullanarak ve kulüpler

gizli DIV ortaya JS olduğunu.

Answer 1

İşte bir keman: http://jsfiddle.net/psyon001/ejdgX/ Eklemek isteyebileceğiniz bir şey, yeni bir bölüm altında gösterildiğinde form durumlarını yeniden boyutlandırmaktır.

jQuery(document).ready(function($) { /* toggle form */ 
    $(".rfq-button").on("click", function() { 
     var $thisParent = $(this).closest('.product-intro-text'), 
      $form = $(".inline-rfq"); 
     if ($thisParent.find('.inline-rfq').length) { 
      $form.slideToggle(); 
     } else { 
      $form.slideUp(function() { 
       $form.appendTo($thisParent).slideDown(); 
      }); 
     } 
    }); 
});​