Hiding templates in Meteor

help
1

Hello,

I have a template in place in my HTML part of meteor.
Which has some data on it, everything is nice and all but, upon a certain click of a button I want to load up a different template, also hiding the one that’s currently seen. How do I do it?

<head>
  <title>ConeTrips</title>
  
</head>

<body>


{{> trip_html}}


</body>

<template name="trip_html">
{{#if currentUser}}
//SOME DATA HERE
{{/if}
</template>

<template name="upon_click">
{{#if currentUser}}
//MORE DATA HERE, BUT IT SHOULD HIDE THE TRIP_HTML template somehow
{{/if}
</template>
2 
{{#if showTrip}}
  {{> trip_html}}
{{/iff}}

And in your helpers you need to define a ReactiveVar and a helper (showTrip) that returns the value of this variable. Additionally, you will need an event that is triggered when you click on the button. This event should set the ReactiveVar to false.

3

Sadly, I cant get this working still…

I tried the following test code that does nothing:

HTML

<template name="history">

 <select class="form-control">
    <option value="hide">Hide Extra Fields</option>
    <option value="show">Show Extra Fields</option>
  </select>
  <br>
  {{#if showExtraFields}}
    <div class="form-group">
      <label>Another Field</label>
      <input class="form-control" type="text">
    </div>
    <div class="form-group">
      <label>One More Field</label>
      <input class="form-control" type="text">
    </div>
  {{/if}}

</template>

JS(CLIENT)

Template.history.onCreated(function(){
  this.showExtraFields = new ReactiveVar( false );
});

Template.history.helpers({
  showExtraFields: function() {
    return Template.instance().showExtraFields.get();
  }
});

Template.history.events({
	 'change select': function( event, template ) {
    if ( $( event.target ).val() === "show" ) {
      template.showExtraFields.set( true );
    } else {
      template.showExtraFields.set( false );
    }
  }
});
4

Nevermind. Got it working. Woop!