Hiding (not removing) content from a collection the Meteor way


I want to emulate jQuery’s .toggle(). I know that if you have a click event, the Meteor data is with it, but I’m not sure how to manipulate the DOM with it. It’d be really cool if I could hide a <li> without having to label it.

    <li>I'm from a collection. Click me to manipulate me.</li>
    <li>I'm from a collection. Click me again to make me normal.</li>

Any documentation or tutorial to reference would be very handy. I’ve searched this for hours online last night.


Do you just want to manipulate DOM? you can access jquery from the template:

    <li>I'm from a collection. Click me to manipulate me.</li>
    <li style="display:none;">I'm from a collection. Click me again to make me normal.</li>

  'click li': function(e, t) {


That’s close to exactly what I wanted. I thought it the <li> would have been linked to the document, so I could hide it with minimal mark-up, like this:

<li>{{this}}</li> <!-- if clicked, only this would be hidden -->

I even tried to view the properties in the console and I saw the $, but I didn’t think to use it like that. Makes 100% sense though. Do you know where in the docs that it tells you the arguments for events? I was just adding arguments and logging them to the console.


The documentation doesn’t seem to mention the second argument to the event callbacks in its eventmaps section :frowning: , I found out about it using console.log too.

Edit: I spoke too fast. It does say The handler function receives two arguments: event, an object with information about the event, and template, a template instance. I just looked over the examples and saw none using the second argument.


Thanks, buddy. You helped a lot. Also, to get my desired effect, I just passed a document’s field into the <li>'s class, so when I toggle, I can use this.someId. For some reason, this._id doesn’t work, maybe it is a security thing.


I think the most “Meteoric” way to do this is to have a ReactiveDict on the page where you keep track of hidden items, and then use Blaze’s {{#if}} to hide the items from the DOM.


Instead of a ReactiveDict, I use a local collection to do this kind of thing (I use observeChanges to sync the local collection with the original collection, both collections sharing the same _id).