Transition, transform in a register form

Question

I'm trying to make a simple button when you click it, appears a box sliding with a form inside (a simple register form), all in the same html I been trying to do it but I can't find the way.

I been trying too with -webkit-transition but I don't know if I'm in the good way.

<style type="text/css">
  .box {
     -webkit-transition:
   }
</style>


<button id="reg" onClick="?"></button>

Hope you all can help me!

Thanks!

Answer 1

I'm not allowed to add comments because of my reputation which is too low -_-. Anyway, Ralsho, do you want to make a transition to a different page/HTML, or do you want to load the HTML of a different page into your page?

If you want the first thing, click on this link: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

If you want to stay on the same page, create a div and position it outside the view of the user, let's say margin-left: -500px. Then do something like:

$('label').click(function() {
    $("#formHolder").load("myForm.html");
    $('#formHolder').animate({
    'marginLeft': '10px'
    }, 350);
});

This will load your form from myForm.html inside the div called #formHolder and then it'll slide the div #formHolder (which now contains your HTML form) and the form will be shown.

The best thing you could do, however, is to just put your form on the page where you want it to appear. So just create a div called #form, put your form inside it and make it slide. You can remove the line with the load() function when you do this.

Good luck!

Answer 2

How about a pure CSS implementation?

Demo Fiddle

HTML

<div>
    <input id='box' type='checkbox' />
    <label for='box'>Click Me!</label>
    <form></form>
</div>

CSS

div {
    position:relative;
}
label {
    position:absolute;
    left:0;
    background:white;
}
input[type=checkbox] {
    opacity:0;
}
form {
    border:1px solid transparent;
    height:300px;
    max-width:0;
    transition:max-width 200ms ease-in;
}
input[type=checkbox]:checked ~ form {
    max-width:300px;
    border:1px solid red;
}