[SOLVED] switching/hiding/showing templates on click

help
1

Hello everyone, im new to coding and I have some really basic JS and jQ knowledge. im trying to make a login register page and I want to hide the login fields once a user clicked on the register button, also on buttons click I want the Register template to be shown.

ATM both templates are shown one below the other

I know I probably can use CSS to do the trick but I want a better solution to do the job.

https://jsfiddle.net/n3fs3zgj/

2

There are a lot of different ways you can tackle this. I’ve typed up a really quick example below. One thing to mention first: have you taken a look at https://useraccounts.meteor.com? Using something like UserAccounts can really save you a lot of coding time.

On with the example - note I’m using Session just to show one quick representation of how it can be done. You should probably look into using something like ReactiveVar’s instead (see the Client-side data with reactive stores section of the Guide for more info).

sample.html:

<body>
  <h1>Login/Register Example</h1>
  {{#if showRegister}}
    {{> register}}
  {{else}}
    {{> login}}
  {{/if}}
</body>

<template name="login">
  <p>... login form goes here ...</p>
  <div>
    <a href="#" class="js-show-register">Register</a>
    <button>Login</button>
  </div>
</template>

<template name="register">
  <p>... registration form goes here ...</p>
  <div>
    <a href="#" class="js-show-login">Login</a>
    <button>Register</button>
  </div>
</template>

sample.js:

if (Meteor.isClient) {

  Template.body.helpers({
    showRegister() {
      return Session.get('showRegister');
    }
  });

  Template.login.events({
    'click button'() {
      alert('Do login stuff!');
    },
    'click .js-show-register'(event) {
      event.preventDefault();
      Session.set('showRegister', true);
    }
  });

  Template.register.events({
    'click button'() {
      alert('Do registration stuff!');
    },
    'click .js-show-login'(event) {
      event.preventDefault();
      Session.set('showRegister', false);
    }
  });

}
2 Likes
3

If you are new to coding, I have one very important suggestion for you. Check if what you are trying to achieve has already been done. If you still want to implement it yourself, read other people’s code and go through how they did it.

One of Meteor’s strong points is that most generic things you want to achieve has already been done, and you can easily import and use other people’s code and solutions.

Go to http://atmospherejs.com and look for accounts.

Although I commend you trying to do these yourself and this learning phase will improve your coding skills but it also brings in many frustrations.

Specific to your question, you can use a session var to control which template is shown, just like @hwilson suggests.

4

Thanks for the reply guys I was just an idiot, installed FlowRouter and works like a charm

5

If you’re using Bootstrap. Try Collapse. Much simpler:
BootStrap Collaps

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Are you Registered?
  </button>
</p>
<div class="collapse" id="collapseExample">
  {{> login}}
</div>