Javascript in js-file

help
1

i am trying to implement the “ridiculously simple accordion”:

<script type=“text/javascript”>
$(document).ready(function($) {
$(’#accordion’).find(’.accordion-toggle’).click(function(){

   $(this).next().slideToggle('fast');
   $(".accordion-content").not($(this).next()).slideUp('fast');

});

});

–HTML–
<div id=“accordion”>
<h4 class=“accordion-toggle”>Accordion 1</h4>
<div class=“accordion-content default”>
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class=“accordion-toggle”>Accordion 2</h4>
<div class=“accordion-content”>
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
</div>

as long as the script is in the html file as noted above everything works as expected.

but: when i put the javascript in a seperate .js file (to use it in different templates as well) the function is still called, but the click-event is no longer registered.
i want to use the accordion in many templates, therefore i am not using a template specific helper or event handler.

why is this? i thought it is all brought together in the end and it shouldn’t matter where i put js-code. somehow i not yet understand the concept.

thanks in advance.

2

This is pretty much plain ol’ HTML + JavaScript. If I were you, I’d look for some basic Meteor tutorials to fully understand the “Meteor way” of doing things. The code you have above is far too heavy in jQuery.

Start with this tutorial.