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.