Question

I have the following

<div id="header">
    {{> header}}
</div>

<div class="hidden content_box">
    {{> content}}
</div>

“content_box” is hidden at the start.

template “header” has a single button.

<template name="header">
    <button id="display_content">Click to display content</button>
</template>

template “content” is just a simple div

<template name="content">
    It's me, content
</template>

When I click on the button in the header, I want to “show” the content_box.

How do I achieve this? – or better yet, what is the best way to achieve this type of effect where you need to access the DOM of a template from an event of another template?

Template.header.events "click button#display_content": (e) ->
  Template.content.show() ?????

Answer 1

I don’t know if it is the best way to do it, but in similar situations what I’ve done before is to use a session parameter to store the show/hide status of the div. In your click event, you then only need to change the value of the session flag. In the template of the div you want to show/hide, you just return the class name.

Example in JS:

Template.header.events({
    "click button#display_content": function () {
        Session.set('contentShow', true);
    }
});

Template.content.className = function (input) {
    return Session.equals('contentShow', true) ? '' : 'hidden';
};

Html

<template name="content">
    <div class="{{className}} content_box">
        It's me, content
    </div>
</template>

You’d need to initialise the session flag to false in Meteor.startup() for example Session.set('contentShow', false);. As session is reactive, the div class name will be re-evaluated automatically when you change the session flag.