滑动窗体开/关页面并展开div

Question

好吧这可能有点棘手，但我确信这是可行的。我有两个按钮，我想触发两个表单，最初用户会看到两个按钮和下面的一个表单，当他们点击另一个按钮时，一个不同的表单将滑入其中比第一个稍大一些并展开page / 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;">

首先隐藏第二种形式。当然，您也可以在类css样式中添加“display：none”。

这是你想要的吗？