João Bernardo João Bernardo - 1 year ago 38
Javascript Question

Transforming a button into a form ( expanding )

In my website I have a Contacts Section and Since I don't really want a form occupying a lot of space I intend to have a regular button saying " Click me" or "Try Me" and after I press it, the button expands (not like a popup or a gallery zoom) more like just changing the width and height so it can transform into a form and the reader can just fill with the information.

<script src=""></script>
left: '0px',
height: '300px',
width: '300px'

this is more or less what I intend to do, I have a button and after I press it the the button zooms so the name, email, subject fields appear.

This is my button.

<div class="mbr-section__container">
<a href="#" class="btn btn-default btn-lg" role="button">Take me there!</a


here is a possible solution, you can easily just remove the button on click. I am just checking for the form Height and animate the height of the form holder:

  var formHeight = $(".form-holder form").height();
    $( this ).animate({opacity:0});


demo link: