I have two buttons "form1" and "form2" which are stacked one above the other.

When I click on form1 button, a form with id="fone" should be shown in such a way that the stacked buttons are faded out and the form is faded in.The form has "back" button,on which when it is clicked,the form fades out and the stacked buttons are faded in.

Same happens when I click on form2 button,another form with form id="ftwo" is faded in and so on.
\*\* HTML \*\*

```
<div id="buttons">
<button id="one" class="btn btn-primary btn-block">Form1</button>
<button id="two" class="btn btn-primary btn-block">from2</button>
</div>

<br>
<div id="fone" class="col-sm-2">
<form role="form" class="hide">
    <input type="text" class="form-control" placeholder="Input me" >
     <input type="submit" class="form-control btn btn-danger" >
    <button class="btn btn-primary"> BACK TO BUTTON LIST </button>
</form>
</div>

    <div id="ftwo" class="col-sm-2">
<form role="form" class="hide">
    <input type="text" class="form-control" placeholder="Input me" >
     <input type="submit" class="form-control btn btn-danger" >
    <button class="btn btn-primary"> BACK TO BUTTON LIST </button>
</form>
</div>

```

Sorry for this kind of a question.Im new to jquery.I could make a fiddle for this <http://jsfiddle.net/2HwHf/1/> 

But I have no idea how this can eb made possible using it.When i googled I found that adding css classes onclick will do the job.But I would like to have some nice transitions happening in between,like the button collapses apart and the form is faded in,or something of that sort?

Please give me some help.I have worked with css ,but havnt touched jquery yet,would liek to know how this can be made possible using jquery.

Thanks