Meteor blaze template is not re-rendered upon change in Reactive variable

Question

Scenario: Fields of the model should be displayed when clicked on the drop-down button.

Template: producer.html

<template name="producer">
    <li>
        <a href="{{producerName}}" >{{producerName}}</a>
        <button class="expand">&#8964;</button>
        {{#if expanded}}
            <form>....</form>
        {{/if}}
    </li>
</template>

Client JS: producer.js

// creating the reactive variable
Template.producer.onCreated(
    function () {
        this.expanded = new ReactiveVar(false);
    }
);

// helper
Template.producer.helpers = {
    expanded() {
        return Template.instance().expanded.get();
    }
};

// event listener
Template.producer.events({
    'click .expand'(event, instance) {
        instance.expanded.set(!instance.expanded.get());
    }
});

While debugging it was clear that the value of the reactive variable is changed accordingly. However, the template does not render the form as expected. What am I missing?

Answer 1

You have defined your Template helpers wrong, it should be

Template.producer.helpers({
    expanded() {
        return Template.instance().expanded.get();
    }
})