crazy_mom2_one
New Member
Ok this might be a little tricky but I'm sure it's doable. I have two buttons that I would like to trigger two forms with, initially the user would see the two buttons and one of the forms underneath, and when they click the other button a different form would slide in which is a little bigger than the first and expand the page/div to contain it. This is the HTML I have so far:\[code\]<a href="http://stackoverflow.com/questions/15653195/#" class="msg medlightgreen large-6 columns">send us a message</a> <a href="http://stackoverflow.com/questions/15653195/#" 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>\[/code\]I tried adding the following to the JS but doesn't seem to work:\[code\]$(document).ready(function() { $('.msg').click(function() {$(".msgform").slideToggle(200); }); $('.quote').click(function() {$(".quoteform").slideToggle(200); }); });\[/code\]
