đặt lại vị trí div dựa trên vị trí nhấp

Question

Tôi có một trang có chứa nhiều hình thức ẩn, giống hệt nhau, mỗi chứa trong một DIV ẩn riêng biệt như vậy:

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> 

Thay vì phải tất cả các các DIV ẩn giống hệt nhau, làm cách nào tôi có thể định vị lại DIV .inline-RFQ để xuất hiện bên dưới nút .rfq tương ứng đã được nhấp? Đây là trang web dành cho thiết bị di động, vì vậy các giải pháp phải thân thiện với thiết bị di động.

Tôi đã sử dụng JS/JQuery trong suốt phần còn lại của trang và đây là JS rằng tiết lộ DIV ẩn:

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

Nhờ sự giúp đỡ của bạn trước.

Answer 1

Đây là một fiddle: http://jsfiddle.net/psyon001/ejdgX/ Một điều bạn có thể muốn thêm là đặt lại trạng thái biểu mẫu khi hiển thị trong phần mới.

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