meteor and collapsible not working

Question

I'm currently using Meteor + materializecss package for my project.

I've got a navigation with a collapsible item (for each term) and a collapsible for all my subjects (in school) divided by terms.

Somehow the collapsible isn't working well. I couldn't figure out why and how to fix this.

a demo is here: http://marky.meteor.com

I got following html code for the navigation:

<template name="navigation">
  <header>
    <nav class="top-nav">
      <div class="container">
        <div class="nav-wrapper">
          <a class="page-title">{{pageTitle}}</a>
        </div>
      </div>
    </nav>

    <div class="container">
      <a href="#" data-activates="nav-mobile" class="button-collapse top-nav full"><i class="mdi-navigation-menu"></i></a>
    </div>

    <ul id="nav-mobile" class="side-nav fixed">
      <li class="logo">
        <a id="logo-container" href="{{pathFor 'features'}}" class="brand-logo"><img src="/img/logo.png" width="100"></a>
      </li>
      <li>
        <a href="{{pathFor 'dashboard'}}"><i class="mdi-action-dashboard right"></i>Dashboard</a>
      </li>
      <li>
        <a href="{{pathFor 'account'}}"><i class="mdi-action-account-box right"></i>Account</a>
      </li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li><a href="#" class="collapsible-header"><i class="mdi-action-assignment right"></i>Your grades</a>
            <div class="collapsible-body">
              <ul>
                {{#each terms}}
                  <li><a href="{{pathFor 'termList'}}">{{term}}</a></li>
                {{/each}}
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </header>
</template>

and the javascript file:

Template.navigation.rendered = function () {
    $('.collapsible').collapsible({
      accordion : false
    });
}

for the termlist with the subjects I got this:

<template name="termList">  
  <div class="row">
    <div class="col s12">
        <ul class="collapsible colterm" data-collapsible="expandable">
            {{#each modules}}
                {{> moduleItem}}
            {{/each}}
        </ul>
    </div>
  </div>  
</template>

js:

Template.termList.rendered = function(){
    $('.collapsible').collapsible({
        accordion : false
    });
}

if someone needs the whole code, I can publish my git project.

Greetings

Answer 1

It's because you are the same selector class collapsible for two different items.

That's collapsible js invocation is doing for the first time invocation on same selector class it is initializing and for the second time it is destroying it.

You need to give different selectors for two different items and invoke accordingly javascript accordingly.

For first collapsible item-

  $('.collapsible-item1').collapsible({
      accordion : false
    });

For second collapsible item-

  $('.collapsible-item1').collapsible({
      accordion : false
    });