riposizionare div sulla base di click posizione

Question

Ho una pagina che contiene più, le forme nascoste identici, ciascuno inserito in un DIV nascosta separata in quanto tale:

HTML:

<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> 

Invece di avere tutti questi DIV nascosti identici, come posso riposizionare il DIV .inline-RFQ per apparire sotto il corrispondente .rfq-button su cui è stato fatto clic? Questo è per un sito mobile, quindi le soluzioni dovrebbero essere ottimizzate per i dispositivi mobili.

sto già usando JS/JQuery per tutto il resto della pagina e qui è il JS che rivela la DIV nascosta:

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

Grazie per il vostro aiuto in anticipo.

Answer 1

Ecco un violino: http://jsfiddle.net/psyon001/ejdgX/ Una cosa che si potrebbe desiderare di aggiungere è la reimpostazione degli stati del modulo quando viene visualizzata in una nuova sezione.

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(); 
      }); 
     } 
    }); 
});​