Meteor: jQuery render template with animation upon click

Question

Upon clicking a class .join-type-heading in authJoinType template, I would like to render (bring into view) the joinForm template. Additionally, I am trying to animate the joinForm like this (see the way it fades in and moves up). http://jsfiddle.net/blackhawx/kMxqj/13/

Should I nest the joinForm template inside of authJoin template?

HTML:

<template name="authJoin">
{{> authJoinType}} // this template displays two boxes with labels 'publisher' and 'reader'
{{> joinForm}} // this to fade into view when either box is clicked
</template>


<template name="authJoinType">
<div class="container join-type">
   <div class="row"> 


    <div class="col-md-6">
        <a href="#">
        <div class="join-type-heading"  value="reader">Reader</div></a>
    </div> 

    <div class="col-md-6">
        <a href="#">
        <div class="join-type-heading"  value="publisher">Publisher
        </div></a>
    </div>

 </div>
</div>
</template>


<template name="joinForm">

    <div class="container">
        <div class="row-fluid">
            <div class="col-md-6">
              <div class="wrapper-auth">
                <form class="form-join">
                  <input type="text" class="form-control" id="firstName" placeholder="first name" required="" autofocus="" />
                  <input type="text" class="form-control" id="lastName" placeholder="last name" required="" autofocus="" />
                  <input type="text" class="form-control" id="email" placeholder="email address" required="" autofocus="" />
                  </form>
                </div>
           </div>
        </div>
     </div>
</template>

client.js for click event (this is fine)

Template.authJoinType.events({
'click div.join-type-heading': function(e, tmpl) {
//function to go here....
}
}); 

I attempted to append html within joinForm jquery on click event but this does not work. eg

$('#container').append('<div>....</div>');

I'm using mizzao:bootstrap-3 and mizzao:jquery-ui.

Answer 1

This code removes the class that is not clicked and Then renders the join in form with the animation. Looks SLICK!! I combined information from users sbking and user3557327.Thank you both!! The only thing remianing is to slide the right div (second col-md-6) to the left if it is clicked.

client.js

Template.authJoinType.rendered = function() { //fade out non selected div
  $('div.join-type-heading').on('click',function() {
    $('.join-type-heading').not(this).each(function() {
    $(this).fadeOut('slow', function(complete){
          $('.join-form').addClass('show'); //references the .show class in css file
       });
   });
  });
};

.css

.join-form {
 margin-top: 20px;
 opacity: 0;
 position: relative;
 top: 40px;
 transition: opacity 600ms, top 400ms;
 }
.join-form.show {
 opacity: 1;
 top: 0px;
 }
.join-type-heading {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 50px;
background-color: #0088cb;
text-align: center;
font-size: 30px;
color: #ffffff;
letter-spacing: 2px;
}

html:

<template name="authJoin">
{{> authJoinType}} 
{{> joinForm}} 
</template>


<template name="authJoinType">
 <div class="container join-type">
  <div class="row"> 

   <div class="col-md-6">
    <a href="#">
    <div class="join-type-heading"  value="reader">Reader</div></a>
   </div> 

   <div class="col-md-6">
    <a href="#">
    <div class="join-type-heading"  value="publisher">Publisher</div></a>
   </div>

  </div>
 </div>
</template>


<template name="joinForm">
 <div class="container join-form"> //.join-form class is added when div in authJoinType is clicked and other div fades out.
    <div class="row-fluid">
        <div class="col-md-6">
          <div class="wrapper-auth">
            <form class="form-join">
              <input type="text" class="form-control" id="firstName" placeholder="first name" required="" autofocus="" />
              <input type="text" class="form-control" id="lastName" placeholder="last name" required="" autofocus="" />
              <input type="text" class="form-control" id="email" placeholder="email address" required="" autofocus="" />
              </form>
            </div>
       </div>
    </div>
 </div>
</template>