Dynamically change style

@dotcomet’s original approach is the most performant, and one that (ultimately) works better on mobile devices (imho). I think the code snippet that you’re looking for is:

<nav class="nav" style="{{getNavStyling}}">
  <template name="navigation">
    <a href="{{pathFor 'home}}">Home</a>
    <a href="{{pathFor 'nutrition}}">Nutrition</a>
  </nav> 
  <button type="button" class="hamburger">hidemenue</button>
</template>
Session.setDefault('navbarOpen', true);

Template.navigation.events({
  'click .hamburger': function(){
     Session.toggle('navbarOpen');
  }
});
Template.navigation.helpers({
  getNavStyling: function(){
    if(Session.get('navbarOpen'){
      return "visibility: visible; opacity: 1";
    } else {
      return "visibility: hidden; opacity: 0";
    }
  }
});

thank you!! ______________________________ (post must be at least 20 characters long …)

ps. the following packages may be of help, too…

https://atmospherejs.com/rahul/animate-everything
https://atmospherejs.com/clinical/extended-api

hi! i just found your accordion:

i am trying to use it:

so i put the html part in my html as seen here:
https://github.com/awatson1978/meteor-cookbook/blob/master/cookbook/accordion.md

i changed the name in the template in the first line to “postsAccordion” i think this is a typo …

and then i add the javascript code below in a js file

Template.postsAccordion.helpers({
rendered: function(){
}
});

and i see … nothing. do i have to include something? i mean i see no css declatations and whatnot.
what am i missing?

thanks!