CODEWITHSUNDEEP
meteor
nl pkr
nl pkr

Reputation: 656

Show Hide elements Meteor way

I have table with a lot of tr, when my page is load 1st tr shows and 2nd tr is hide, for example:

<table>
  <tr></tr> // shows
  <tr></tr> // hide
  <tr></tr> // shows
  <tr></tr> // hide
  ...
  ...
  etc.
</table>

What I want to build: When you click on "show" tr, lower tr (which is located underneath) must shows too, and when you clicked on "NEW" shows tr it must hide (like toggle)

PROBLEM: When I clcked on "show" tr, ALL "hide" tr shows too, NOT one which is located underneath

My CODE:

<template name="postJobs">
  <tr class="smallInfo">
    // some code
  </tr>
  {{#if showFullContent}}
  <tr class=" bigInfo">
    // some code
  </tr>
  {{/if}}
</template>


Template.postJobs.helpers({
  showFullContent:function(){
    return Session.get('showContent');
   }
});

Template.postJobs.events({
  'click .smallInfo':function(){
    Session.set('showContent',true);
  },
  'click .bigInfo':function(){
    Session.set('showContent',false);
  },
});

I dont want to use jQuery

Upvotes: 3

Views: 1100

Answers (1)

saimeunt
saimeunt

Reputation: 22696

The problem with your current code is that you're using Session, which is a global reactive dictionary, meaning that you only end up storing one state for all of your table rows.

Here is a solution using a template scoped ReactiveVar object :

HTML

<template name="jobsTable">
  <table>
    {{#each jobs}}
      {{> postJobs}}
    {{/each}}
  </table>
</template>

<template name="postJobs">
  <tr class="smallInfo">
    // some code
  </tr>
  {{#if showFullContent}}
    <tr class=" bigInfo">
      // some code
    </tr>
  {{/if}}
</template>

JS

Template.postJobs.onCreated(function(){
  this.showFullContent = new ReactiveVar(false);
});

Template.postJobs.helpers({
  showFullContent: function(){
    return Template.instance().showFullContent.get();
  }
});

Template.postJobs.events({
  "click .smallInfo": function(event, template){
    template.showFullContent.set(true);
  },
  "click .bigInfo": function(event, template){
    template.showFullContent.set(false);
  }
});

Upvotes: 4

Related Questions