title: Close all open elements
body: <p>I'm using reactive-var, currently the event below shows and hides the hidden div when it is clicked. Since there are a number of options I would like to change the event below to hide any of the open divs and only display the one I've clicked on. How would I write that?</p>
  
  <p>Path: <code>templates.html</code> </p>
  
  <pre><code>    &lt;template name="jobOfferLayout"&gt;
          {{#each jobOffers}}
  
          {{&gt; jobOfferCard}}
  
          {{/each}}   
      &lt;/template&gt;
  
  &lt;template name="jobOfferCard"&gt;
  
      &lt;div class="list-group"&gt;
          &lt;a class="list-group-item smallInfo"&gt;
              &lt;h4 class="list-group-item-heading"&gt;{{jobs}}&lt;/h4&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      {{#if showFullContent}}
          &lt;div class="bigInfo"&gt;
           Show big info
          &lt;/div&gt;
  
      {{/if}}
  
  &lt;/template&gt;
  </code></pre>
  
  <p>Path: <code>jobOfferCard.js</code></p>
  
  <pre><code>Template.jobOfferCard.onCreated(function(){
    this.showFullContent = new ReactiveVar(false);
  });
  
  
  Template.jobOfferCard.helpers({
      showFullContent: function(){
          return Template.instance().showFullContent.get();
      },
  });
  
  Template.jobOfferCard.events({
    "click .smallInfo": function(event, template){
      template.showFullContent.set(!template.showFullContent.get());  
    },
  });
  </code></pre>