Slide form on/off page and expand div

Question

好吧，這可能有點棘手，但我相信它是可行的。我有兩個按鈕，我想要觸發兩種形式，最初用戶會看到兩個按鈕和下面的一種形式，當他們單擊另一個按鈕時，一個不同的形式會滑動，其中比第一個更大並展開頁面/ div來包含它。這是HTML我到目前爲止：

<a href="#" class="msg medlightgreen large-6 columns">send us a message</a> 
<a href="#" class="quote medlightgreen large-6 columns">request free quote</a> 

<div class="msgform"> 
<form> 
    <div class="row"> 
     <div class="large-4 columns"> 
     <input type="text" placeholder="name"> 
     </div> 
     <div class="large-4 columns"> 
     <input type="text" placeholder="phone"> 
     </div> 
     <div class="large-4 columns"> 
     <input type="text" placeholder="e-mail"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="large-6 columns"> 
     <input type="text" placeholder="monthly budget"> 
     </div> 
     <div class="large-6 columns"> 
     <input type="text" placeholder="timeframe"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="large-12 columns"> 
     <textarea placeholder="message"></textarea> 
     </div> 
    </div> 
</form> 
</div> 

<div class="quoteform"> 
<form> 
    <div class="row"> 
     <div class="large-4 columns"> 
     <input type="text" placeholder="name"> 
     </div> 
     <div class="large-4 columns"> 
     <input type="text" placeholder="phone"> 
     </div> 
     <div class="large-4 columns"> 
     <input type="text" placeholder="e-mail"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="large-12 columns"> 
     <textarea placeholder="message"></textarea> 
     </div> 
    </div> 
</form> 
</div> 

我嘗試添加下面的JS，但似乎並沒有工作：

$(document).ready(function() { 
    $('.msg').click(function() { 
$(".msgform").slideToggle(200); 
    }); 
    $('.quote').click(function() { 
$(".quoteform").slideToggle(200); 
    }); 
}); 

Answer 1

它的工作對我來說，到目前爲止： 我創建了一個的jsfiddle：

更新http://jsfiddle.net/h9Zt4/1/

而且我將第二種形式的樣式設置爲display:none，因爲您只希望首先顯示一個樣式。

所以你會看到

<div class="quoteform" style="display: none;"> 

這是這樣，第二種形式是在第一隱藏。當然，您也可以將「display：none」添加到類CSS樣式中。

這是你想要的嗎？