João Bernardo João Bernardo - 7 months ago 9
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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '0px',
height: '300px',
width: '300px'
});
});
});
</script>
</head>
<body>


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
</div>

Answer

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:

$("button.form-btn").on('click',function(){
  var formHeight = $(".form-holder form").height();
    $( this ).animate({opacity:0});
    $(".form-holder").animate({height:formHeight});

});

demo link:https://jsfiddle.net/keinchy/ua3sc09w/1/