Help with changing class and rerendering components

I am running into a problem where I have a list of tabs halfway down a page that are supposed to display seperate information depending on which one is clicked.

<li class="is-active"><a>Tab2</a></li>

basically when I click on Tab1 I want to add the ‘is-active’ class to it and remove the ‘is-active’ class from Tab2. Also, I want to then render {{> Tab1}} (which I am not displaying, because I dont know how to go about that).

Sorry for being so vague, I feel like I am just missing something really simple here.


I have tabs on my app as well and use Blaze and reactivity. Here is a very simplified approach how you could do it

<template name="tabs">
  <li class="{{tabActive "tab1"}}"><a id="tab1">Tab1</a></li>
  <li class="{{tabActive "tab2"}}"><a id="tab2">Tab2</a></li>
 {{Template.dynamic template=activeTab}}
<template name="tab1">
<template name="tab2">
 var instance = this;
 instance.activeTab = new ReactiveVar('tab1');
 tabActive(tab) {
  var instance = Template.instance();
  return tab == instance.activeTab.get() ? 'is-active' : '';
 activeTab() {
  return Template.instance().activeTab.get();

Thank you. I eventually figured out a way to do it, but instead of using a helper, I used a click event with jquery to grab the content of the tab and set a reactive-var that way. I think yours is a much simpler/better approach!

Hmm, maybe I need to go back to how I originally had it, because with this example, clicking does nothing, unless I am misunderstanding?

I am stupid. Forgot to add events to the template. For this to work you need to add id=tab1 etc to your links{
 'click a'(event, instance){
1 Like